What is the canonical approach to passing data to a jQuery UI Dialogue?

I have the following markup:

<div data-id="1" data-name="Product 1">Product 1 <a href="#" id="delete_1">Delete</a></div><br />
<div data-id="2" data-name="Product 2">Product 2 <a href="#" id="delete_2">Delete</a></div><br />
<div data-id="3" data-name="Product 3">Product 3 <a href="#" id="delete_3">Delete</a></div><br />
<div data-id="4" data-name="Product 4">Product 4 <a href="#" id="delete_4">Delete</a></div><br />

<div id="delete-product" title="Delete product?">
  <p>
    <span 
      class="ui-icon ui-icon-alert" 
      style="float:left; margin:0 7px 20px 0;">
    </span>
    This product will be permanently deleted and cannot be recovered. Are you sure? 
  </p> 
</div>

I have the following script jQuery UI:

$(function () {
  $("#delete-product").dialog({
    autoOpen: false,
    resizable: false,
    height: 140,
    modal: true,
    buttons: {
      "Delete": function () {
        $(this).dialog("close");
      },
      "Cancel": function () {
        $(this).dialog("close");
      }
    }
  });

  $("a[id^='delete']").each(function () {
    $开发者_JAVA技巧(this).click(function () {
      $("#delete-product").dialog('open');
      return false;
    });

  });
});

How do I pass a value to the Delete function so I can display it in the dialogue box? I thought about setting a global variable but that's a bit icky.

I don't mind if I just get a reference to the <a> tag that raised the click event. From there I can work out the rest.

---

You can use the .data() API in jQuery.

$(function () {
  $("#delete-product").dialog({
    autoOpen: false,
    resizable: false,
    height: 140,
    modal: true,
    buttons: {
      "Delete": function () {
        var id = $(this).data('item-id');
        //Do something with the id
        $(this).dialog("close");
      },
      "Cancel": function () {
        $(this).dialog("close");
      }
    }
  });

  $("a[id^='delete']").each(function () {
    $(this).click(function () {
      var id = $(this).parent().attr('data-id');
      $("#delete-snapshot").data('item-id', id).dialog('open');
      return false;
    });

  });
})

EDIT: Just noticed that ID's missmatch for the dialog. But the problem is in the code I copied from your question.