javascript 在动态添加的按钮上注册点击事件 jQuery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17274023/
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
registering click event on dynamically added buttons jQuery
提问by kunal18
I am using bootstrap
我正在使用引导程序
Following is my code to dynamically fetch feeds and then add them on the page by appending inside the division whose id is 'feeds':
以下是我的代码，用于动态获取提要，然后通过将其附加到 id 为“提要”的部门内来将它们添加到页面上：
$.ajax({
url: 'http://api.feedzilla.com/v1/categories/'+newsId+'/articles.json',
type: 'GET',
dataType: 'json',
// to execute when successfully got json response
success: function(response){
$.each(response.articles, function(){
var feed= "<div class='media well'>"+
"<div class='media-body'>"+
"<h4 class='media-heading'>"+this.title+"</h4>"+
"<h6>"+this.publish_date+"</h6>"+
"<p>"+this.summary+"</p>"+
"<a href='"+this.url+"' target='_blank'>Continue Reading</a>"+
"</div><br><br>"+
"<button class='showinfo btn pull-right' id='info'>Show Info</button>"+
"</div>";
$('#feeds').append(feed);
});
},
// to execute when error
error: function(jqXHR, textStatus, errorThrown){
alert("Server error!");
},
// execute at last whether success or error
complete: function(){
}
});
As you can see I am adding a class 'showinfo' as well as id 'info' to dynamically added buttons.
如您所见，我正在向动态添加的按钮添加一个类“showinfo”和 id“info”。
Now following is my event handler:
现在以下是我的事件处理程序：
// SHOW INFO BUTTON CLICK HANDLER
$('.showinfo').click(function(){
alert('triggered');
});
But it does not work :(!! neither with id: $('#info').click()!! If I don't add the button dynamically, it works perfect.Why this is so?
但它不起作用 :(!! id: $('#info').click() !! 如果我不动态添加按钮，它工作完美。为什么会这样？
回答by techfoobar
Use on():
使用on()：
$('#feeds').on('click', '.showinfo', function() {
alert('triggered');
});
The above binds any clickevent on any element matching .showinfoinside #feedsto the specified callback function.
以上将任何匹配内部的元素上的任何点击事件绑定到指定的回调函数。.showinfo#feeds
Also, note that the elements that should match (.showinfoin this case) need notexist at the time of binding (hence it applies to dynamically added elements as well).
另外，请注意应该匹配的元素（.showinfo在这种情况下）在绑定时不需要存在（因此它也适用于动态添加的元素）。
回答by Suresh Atta
You have to do event delegationfor dynamically added elements.
您必须为动态添加的元素执行事件委托。
// SHOW INFO BUTTON CLICK HANDLER
$('#feeds').on("click",'.showinfo' ,function(){
alert('triggered');
});
And why on() works ??
为什么 on() 有效？
Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on().
事件处理程序仅绑定到当前选定的元素；当您的代码调用 .on() 时，它们必须存在于页面上。
回答by Paritosh
.clickworks for existing objects. If your controls are going to be added dynamically, then use .on(or live- but i's deprecated). It attaches the events for the objects which are added dynamically.
.click适用于现有对象。如果您的控件将被动态添加，则使用.on（或live- 但我已弃用）。它为动态添加的对象附加事件。
$('.showinfo').on('click', function(){
alert('triggered');
});
