附加事件动态插入按钮页面上使用jquery使用.on（）

我有一个页面，我返回用户帖子，这些帖子可以在发布新评论后，使用一些jQuery代码在飞行中注释我插入该帖子下的新评论以及Delete按钮。问题是Delete按钮不适用于新插入的元素，除非我重新加载页面。我读过解决方案是使用.on（）方法，但是我对如何实现这个有点困惑。我有一个功能，能够随着新插入注释更新后的部分，这是删除注释功能：附加事件动态插入按钮页面上使用jquery使用.on（）

$(document).ready(function() { 

    $("button[id*='deletecmnt_']").click(function() { 

     var id = this.id.replace('deletecmnt_', ''); 

     var comment_card_id = ('#comment_' + id); 

     var token = $(this).data('token'); 

     $.ajax({ 
      url: '../comment/' + id, 
      type: 'post', 
      data: {_method: 'delete', _token: token}, 
      success: function() { 


       // Checks for display of comment card and removes it 
       if ($(comment_card_id).is(":visible")) { 

        $(comment_card_id).fadeOut("fast"); 

       } 
      } 
     }) 

    }) 

});

我不明白，这里需要以及如何改变什么。

来源

2016-07-29 Chriz74

是否有可能将代码降至最低。现在通过 – jonathanGB

请稍候，我会尝试 – Chriz74

我还建议在关键点放置'console.log（“ called”）'以查看代码的某些点是否未被调用。发现问题非常有用。 – jonathanGB

您需要使用事件委托来动态添加元素。在你的.on（）方法中，你需要添加你想要的处理程序附加的选择器，它在创建之后。

$(document).ready(function(){ 

    $("body").on("click", "button[id*='deletecmnt_']", function() { 
    // codes 
    } 
});

这将监听尚未创建的元素与选择器匹配的点击。以下是更多信息的JQuery API文档页面：http://api.jquery.com/on/

来源

2016-07-29 17:55:33 Cruiser

我的代码中的$（document）.ready（function（）部分发生了什么？我必须删除它还是无所谓？ – Chriz74

不，保存它。 – Cruiser

'$（document）.ready（...）'是必须的，否则当你的** DOM **的'body'或其他元素的处理器可能不存在宣布他们 – jonathanGB

附加事件动态插入按钮页面上使用jquery使用.on（）

回答

相关问题