.on 不适用于动态 html

Question

我正在创建拖放操作。当发生下降时，我创建了新的运行时 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" 没有任何反应！！怎么了？有什么解决办法吗？

Answer 1

尝试：

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

Answer 2

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

$(文档).on( "click", "button.edit-new-modal", 函数() {

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

Answer 3

这个

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

应该是：

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

Answer 4

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

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

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

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

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

.on 不适用于动态 html

.on not working on dynamic html

html

javascript

jquery-events