jQuery UIダイアログにデータを渡す標準的なアプローチは何ですか？

Question

私は次のマークアップ持っている：私は次のスクリプトのjQuery UIを持って

<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> 

を：私はダイアログボックスに表示することができますので、

$(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() { 
    $(this).click(function() { 
     $("#delete-product").dialog('open'); 
     return false; 
    }); 

    }); 
}); 

にはどうすればDelete関数に値を渡すのですか？私はグローバル変数を設定することを考えましたが、それはちょっとうんざりです。

クリックイベントを発生させた<a>タグへの参照を取得しても構いません。そこから私は残りの部分を解決することができます。

Answer 1

jQueryで.data（）APIを使用できます。

$(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：ダイアログのIDミスマッチに気付いただけです。しかし、問題はあなたの質問からコピーしたコードにあります。