.on 不适用于动态 html答案

【问题标题】：.on not working on dynamic html.on 不适用于动态 html
【发布时间】：2015-05-14 06:27:22
【问题描述】：

我正在创建拖放的东西。当 drop 发生时，我创建了新的运行时 html 并希望绑定它事件，所以我使用了以下 .on

 .on ( "event", "selector", function() {

但它不起作用。这是片段：

$( "#wrap .dragImages" ).on( "click", "button.edit-new-modal", function() {
    var photoId = $(this).attr('data-username');        
    alert(photoId);
});

.on 在拖放之前有效。但是之后点击“button.edit-new-modal”没有任何反应！怎么了？有什么解决办法吗？

【问题讨论】：

确保.dragImages元素不是动态添加的。

标签： javascript html jquery-events

【解决方案1】：

试试：

$(document.body).on( "click", "button.edit-new-modal", function() {
  var photoId = $(this).attr('data-username');        
  alert(photoId);
});

【讨论】：

【解决方案2】：

这个

$( "#wrap .dragImages" ).on( "click", "button.edit-new-modal", function() {

应该是：

$(document).on( "click", "button.edit-new-modal", function() {

【讨论】：

是的！它与$(document.body).on 一起使用效果更好。感谢您的帮助:)

【解决方案3】：

当您连接事件处理程序时，它们仅绑定到现有的 HTML 元素。

当您插入动态 HTML 时，您必须再次连接这些处理程序。

在您的情况下，您可以将事件处理程序设置包装在这样的函数中：

    function wireUpHandlers() {
        $( "#wrap .dragImages" ).on( "click", "button.edit-new-modal", function() {
            var photoId = $(this).attr('data-username');        
            alert(photoId);
        });
    }

在您的 document.ready 中调用此方法，然后在您将动态 HTML 附加到页面后再次调用此方法

【讨论】：

【解决方案4】：

这是动态生成的 HTML，因此无法正常工作。尝试使用下面的代码 sn-p

$(document).on( "click", "button.edit-new-modal", function() {

    var photoId = $(this).attr('data-username');        
    alert(photoId);
});

【讨论】：