Question

我正在创造拖放的东西。当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 有效。但是在点击＆＃34; button.edit-new-modal＆＃34; !!之后没有任何事情发生！怎么了？任何解决方案？

Answer 1

尝试：

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

Answer 2

这是动态生成的HTML，因此无法使用。尝试使用以下代码段

$（document）.on（＆＃34;点击＆＃34;，＆＃34; button.edit-new-modal＆＃34;，function（）{

    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上工作

4 个答案: