使用 JQuery 新添加的具有多个 div 的元素 [重复]

Question

为什么我无法获得这个新添加的多个子 div 的 text。我正在使用 JQuery 添加这个动态元素。这是我的示例小提琴：JSFIDDLE

有人可以向我解释我哪里出错了吗？

脚本

var counter = 0;

$("button").click(function() {

$("<div class='child-list-workorder'>\
                            <div class='list-workorder'>\
                               <div class='list-workorder-header'>\
                                 <h3 id='" + counter + "' class='list-workorder-id'>click me " + (++counter) + "</h3>\
                               </div>\
                               <p>" + counter + "</p>\
                            </div>\
                        </div>").appendTo("div.parent-list-workorder");

    });


$("div.list-workorder-header").on("click", "h3.list-workorder-id", function(){
    alert(this.id);
});

Answer 1

您必须使用delegated event，因为 html 是动态生成的：

$(document).on("click", "h3.list-workorder-id", function(){
    alert(this.id);
});

您的 child-list-workorder 类的 div 也是动态生成的：

$(".child-list-workorder").on("click", "h3.list-workorder-id", function(){
...............

不会工作，因为它也是动态生成的。

或者您可以使用具有在 DOM 加载时加载的类 parent-list-workorder 的父 div：

$(".parent-list-workorder").on("click", "h3.list-workorder-id", function(){
    alert(this.id);
});

WORKING UPDATED FIDDLE