jquery - 使用 JQuery 新添加的具有多个 div 的元素

标签 jquery css ajax dynamic element

<分区>

为什么我无法获取这个新添加的多个子 div 的 text。我正在使用 JQuery 添加此动态元素。这是我的示例 fiddle :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);
});

最佳答案

你必须使用 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

关于jquery - 使用 JQuery 新添加的具有多个 div 的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26419815/

上一篇:html - 垂直侧面菜单的折叠不起作用

下一篇:css 下拉菜单转移网站

相关文章:

javascript - 全日历.io : how to display one event per line in agendaWeek then mix all in one?

javascript - jQuery 的 slideDown() 问题

python - CSS 定位器 : unable to locate element via code

javascript - CSS, "-webkit-animation"在 Google Chrome 上占用过多 CPU

php - AJAX 多个下拉菜单

php - 多个 AJAX 请求功能合并为一个?

javascript - Jquery 在 AJAX 表单结果显示中没有响应

jquery - 如何使用 HTML5 History/State API 并保持带主题标签的超链接(文档内的链接)完好无损

jquery - 在导航中创建事件菜单点

javascript - 使用 cookie 保留整个网站的样式表偏好