javascript - 动态更改类后 onmousedown 不回调

Question

我有以下 div:

<div class="celula" id="838">                       
</div>
<div class="celula" id="839">                       
</div>
<div class="celula" id="840">                       
</div>

到目前为止，我使用带有 ajax 响应的 jquery 动态更改它们，效果很好。假设它生成以下内容:

<div class="checked" id="838">                      
</div>
<div class="checked" id="839">                      
</div>
<div class="checked" id="840">                      
</div>

完成js回调:

$(document).ready(function () {
    document.getElementById("templatenome").innerHTML = screen.width + " - " + screen.height;


    $('.celula').on('mousedown', function(){

         var template = $("#templatenome").attr("name");
         var $div = document.getElementById (this.id);
            $div.style.backgroundImage = "url('../../resources/"+template+"/images/CelulaPOP.png')";

              var audio = document.getElementById("audio");
              audio.play();

              $(document).one('mouseup', function(){
                  sendAjax($div.id);
                $div.style.backgroundImage = "url('../../resources/"+template+"/images/CelulaSEL.png')";
            });

    });

    $(document).on('mousedown', '.checked', function(){
          $(document).one('mouseup', function(){
          });

    });
});

Answer 1

使用委托(delegate)事件处理程序，附加到动态元素的不变祖先:

$(document).on('mousedown', '.checked', function(){
      $(document).one('mouseup', function(){
           alert("I was mouse-uppped on a .checked div!");
      });

});

因为您不希望先前的处理程序在类更改后运行(请参阅下面的评论)，所以也将其设为委托(delegate)处理程序:

例如

$(document).on('mousedown', '.celula', function(){

这仅在事件时间 应用 jQuery 选择器，因此元素只需要在那时匹配(而不是在事件注册时)。

document 是最好的默认值，如果没有更近的文件可用/方便的话。不要使用 'body'，因为它有一个错误(如果样式导致计算出的 body 高度为 0，它不会将鼠标事件冒泡到 body)

这是一个小演示，展示了当类发生变化时事件将如何通过委托(delegate)的事件处理程序触发:

JSFiddle: http://jsfiddle.net/TrueBlueAussie/5xb6vohp/3/