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
});

用于动态添加DOM元素的处理函数

2 个答案: