jquery - 动态添加 DOM 元素的处理函数

Question

每当在 DOM 中的任何位置添加具有某个类的项目时，我都想处理某些初始化步骤。这包括将一些样式属性应用到其父级（这就是我不能使用 CSS 的原因），以及绑定到 click 事件。

以下代码在元素为静态时有效（之后已在页面上document.ready）：

$(function(){
  //... global initialization code
  $('.myclass').each(function(){
    var parent = $(this).parent();
    parent.css({cursor:'pointer'}); //apply CSS style to the parent
    parent.click(function(event){
      //... event handler
    });        
  });    
});

是否可以将其转换为处理动态添加的元素以及如何处理？

Answer 1

没有跨浏览器的“添加”或“创建”事件，您必须找到另一种方法来完成它。

在样式表中进行 CSS 更改：

.myClass {
    cursor: pointer;
}

然后对 click 事件使用事件委托：

$(document).on("click",".myClass",function(){
    var parent = $(this).parent();
    parent.doSomething();
});

另一种选择（如评论中指出的）是在添加元素后触发自定义事件。

$(document).on("added", ".myClass", function(){
    var parent = $(this).parent();
    parent.doSomething();
});
//... later on in your code ...
$('<div class="myClass"></div>').appendTo("#someotherel").trigger("added");

这与简单地执行此操作基本相同，这就是我在评论中提到的：

var parent = $("#someotherel");
parent.append('<div class="myClass"></div>').css("cursor","pointer").click(...

Answer 2

用于.on()动态添加的元素 -

$(document).on('click','.myclass',function(event){
   //... event handler
});