javascript 如何从从.Append 函数创建的动态元素中使用 JQuery 选择器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12657395/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use JQuery selectors from dynamic Elements created from.Append function?
提问by RollRoll
I have this loop creating several divs with elements in it. I want to be able to attach a click event to every link with the "linky" class, and this link would read the contentID attribute.
我有这个循环创建了几个带有元素的 div。我希望能够使用“linky”类将点击事件附加到每个链接，并且该链接将读取 contentID 属性。
I've searching forever, find cases to use selectors in dynamic created elements but just can't apply to my case. Any tips?
我一直在搜索，找到在动态创建的元素中使用选择器的案例，但不能适用于我的案例。有小费吗？
for (i = 0; i < msg.length; i++) {
var htmlCode = "<a href='/Controller/Details/" + msg[i].ID + "' style = 'float: left;'><img class='packageImage' border='0' src='" + msg[i].Size0Path + "' /></a>";
htmlCode += "<span style='float: left;margin: 5px 0px 0px 10px;'>" + "<b>" + msg[i].TheName + "</b><br>";
if (msg[i].IsPaused == true) {
htmlCode += "<a href='#bar' class=linky contentID='" + msg[i].ID + "'>Resume</a>";
} else {
htmlCode += "<a href='#bar' class=linky contentID='" + msg[i].ID + "'>Pause</a>";
}
htmlCode += "</span>";
htmlCode += "<div class='clear'></div>";
$("#divContent").append(htmlCode);
}
Given the answers, I'm trying to attach the event to class linky, but I just not sure where, see more details below, my instructions are creating the dynamic Elements from the result of ajax submit(post).
鉴于答案，我正在尝试将事件附加到类 linky，但我不确定在哪里，请参阅下面的更多详细信息，我的说明是根据 ajax submit(post) 的结果创建动态元素。
success: function (msg) {
$("body").on("click", "a.linky", function () {
alert($(this).attr("contentID"));
});
for (i = 0; i < msg.length; i++) {
var htmlCode = "<a href='/Controller/Details/" + msg[i].ID + "' style = 'float: left;'><img class='packageImage' border='0' src='" + msg[i].Size0Path + "' /></a>";
htmlCode += "<span style='float: left;margin: 5px 0px 0px 10px;'>" + "<b>" + msg[i].TheName + "</b><br>";
if (msg[i].IsPaused == true) {
htmlCode += "<a href='#bar' class=linky contentID='" + msg[i].ID + "'>Resume</a>";
} else {
htmlCode += "<a href='#bar' class=linky contentID='" + msg[i].ID + "'>Pause</a>";
}
htmlCode += "</span>";
htmlCode += "<div class='clear'></div>";
$("#divContent").append(htmlCode);
}
}
回答by Jon
Use the delegated form of on:
使用委托形式on：
$("body").on("click", "a.linky", function() {
alert($(this).attr("contentID"));
});
You only need to do this once, before creating any dynamic content. It will attach an event handler to <body>that will respond to any of its descendants that satisfy the a.linkyselector being clicked. It does not matter if these elements are already in the DOM at the moment you attach the handler or if they get added later.
在创建任何动态内容之前，您只需执行一次此操作。它将附加一个事件处理程序，<body>该处理程序将响应满足a.linky被单击的选择器的任何后代。这些元素在您附加处理程序时是否已经在 DOM 中，或者它们是否稍后被添加都无关紧要。
回答by Sushanth --
In this case you need to bind the event as soon as the element is created. But frequent binding and unbinding is a bad pattern.
在这种情况下，您需要在创建元素后立即绑定事件。但是频繁的绑定和解绑是一个不好的模式。
So you are supposed to delegate the event i.e; attach the event to the parent container of these controls which listen to the events for its children and provide events to their children on which these are delegated..
所以你应该委托事件，即；将事件附加到这些控件的父容器，这些控件侦听其子项的事件，并向其委派这些事件的子项提供事件。
Try this
试试这个
$('body').on('click' , 'a.linky', function() {
alert('Content id is : '+ $(this).attr('contentID'));
});
回答by undefined
Just find the element after appending it attach the event handler there:
只需在添加元素后找到该元素，然后在那里附加事件处理程序：
$("#divContent").append(htmlCode)
.find('.linky')
.click(function(){
//your click handler
});
