1

さて、私は以前に.onをかなりうまく使用しましたが、動的要素をまったく認識していないため、今回は期待どおりに機能していません。

http://www.MetalGains.comにアクセスして問題を参照してください。[デモを表示]をクリックして、デモの資格情報を使用してログインします。「鉛筆」をクリックすると、編集機能が機能することがわかります。ただし、アセットを追加してから、追加した鉛筆をクリックすると、機能しないことがわかります。

ある時点で、このコード行が動的に追加されます。

 <div class='edit-item'><a name='"+$id+"' href='#add-asset-"+status+"' class='edit'></a></div>

呼び出したいJavaScriptは以下のとおりです。念のために言っておきますが、動的なものではなく、ページの読み込みで機能します。私は何が欠けていますか？

$(".edit-item .edit").on('click', function(){
    return false;
  }).each(function(){
            $(this).fancybox({
             afterClose: function(){
            //we have to remove this class so that if someone tries to add a new asset it will use the 
            //add script and not the update script
            $(".asset-form").removeClass("update");
            //We need to set the values back to empty so that they aren't prepopulated when someone 
            //tries to add an asset later.
            $(".asset-form :input[name='type']").val("");
            $(".asset-form :input[name='year']").val("");
            $(".asset-form :input[name='quantity']").val("");
            $(".asset-form :input[name='ounces']").val("");
            $(".asset-form :input[name='paid']").val("");
            $(".asset-form :input[name='date']").val("");
            $(".asset-form :input[name='notes']").val("");

            //we remove the hidden field that passes the asset id. 
            $(".asset-form :input[name='editId']").remove();



            }//end afterClose
    }); //end edit fancybox
}); //end each

ちなみに、これは完璧に機能します：

   $(".note-img").on('click', function(){
return false;
}).each(function(){
    $(this).fancybox();
    });

この動的に追加されたコンテンツに関連して：

   <a href='#note-"+$id+"' class='note-img'></a><div class='note' id='note-"+$id+"'>"+$notes+"</div>
4

3 に答える 3

4

onイベント委任の正しい使用方法は次のとおりです。

$(document).on('click', '.edit-item .edit', function(){

または：

$('#staticParent').on('click', '.edit-item .edit', function(){

edit-itemが静的な場合:

$('.edit-item').on('click', '.edit', function(){

実際には古い非推奨のメソッドonとは異なり、ドキュメント オブジェクトからイベントを委任しますが、メソッドでは、イベントの委任に使用す​​る静的な親要素またはドキュメント オブジェクトを指定する必要があります。liveliveon

于 2012-12-09T05:42:47.770 に答える
0

セレクターコンテキストを最後に追加することで、この問題を以前に修正しました...

$(".edit").on('click', '.edit-item', function(){ ... })};
于 2012-12-09T05:44:35.460 に答える
0

以下のコードを参照してください。

$('.edit-item').on('click', '.edit', function(){})
于 2012-12-09T06:19:45.037 に答える