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

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

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

});

由于您不希望先前的处理程序在更改类后运行（请参阅下面的注释），因此也要将其作为委派处理程序：

e.g。

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

这仅适用于事件时间的jQuery选择器，因此元素只需匹配（而不是在注册事件时）。

如果没有更接近/方便的话，

document是最好的默认值。不要使用'body'，因为它有一个错误（如果样式导致计算出的身高为0，则不会将鼠标事件冒泡到body）

这是一个小小的演示，展示了在更改类时，事件将如何与委派的事件处理程序一起触发：

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

在动态更改类后，onmousedown不会回调

1 个答案: