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与旧的和不推荐使用的live方法不同，live它从文档对象委托事件，但是使用on方法您应该指定应该使用哪个静态父元素或文档对象进行事件委托。

于 2012-12-09T05:42:47.770 回答
0

请参考以下代码。

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

我之前通过在末尾添加一个选择器上下文来解决这个问题，就像这样......

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