jQuery ajax内容加载后点击不工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13584971/
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
Click not working after ajax content has loaded
提问by KJS
How can I make live('click',function()" work after an ajax call and returning content with html(data)? After 4 hrs of searching I think I'd better ask because I am getting nowhere.
如何在 ajax 调用后使 live('click',function()" 工作并返回带有 html(data) 的内容？经过 4 小时的搜索，我想我最好问一下，因为我无处可去。
This part is working:
这部分正在工作：
$.ajax({
type: "POST",
url: "loadAlbum.php",
data: dataString,
success: function(data){
$(".loader").html(data, {}, function(){
//content is loaded now
//need to get the function below working in this part of the content
});
},
error : function(data) { }
});
});
And I need this one to work in the ajax above:
我需要这个在上面的 ajax 中工作：
$('.divName as inside loader').live('click',function(){
alert('gotClicked');
var vidItem = $(this).attr('data');
vidItem = vidItem.split('-'); var bookID = vidItem[0]; var state = vidItem[1];
var dataString = 'bookID='+ bookID + '&state=' + state;
alert(dataString);
});
回答by Joel Etherton
.live()is deprecated. Use .on()instead.
.live()已弃用。使用.on()来代替。
$("body").on("click", "divClass", function(event){
alert('gotClicked');
});
Also, just to make sure you're calling the div correctly, it shouldn't be the div name it should be the div class when calling it in that fashion.
此外，为了确保您正确调用 div，它不应该是 div 名称，而在以这种方式调用它时应该是 div 类。
Also, using live()and on()needs to be applied at a parent level that exists at the document load. If this divName you're using didn't exist when the page loaded itself it can't be bound to. However, if you bind to the body element, then it'll always look for the div when the click occurs.
此外，使用live()和on()需要在文档加载时存在的父级应用。如果页面加载本身时您使用的这个 divName 不存在，则无法绑定到它。但是，如果您绑定到 body 元素，那么它会在发生单击时始终查找 div。
回答by Salangkar Acharya
$(document).delegate(".classname","click",function(){
alert("ok");
});
回答by War10ck
Since you are appending HTML data that is returned to you via an ajax call, you need to bind the function after the new HTML has been added to the DOM. If you call the code:
由于您要附加通过 ajax 调用返回给您的 HTML 数据，因此您需要在将新 HTML 添加到 DOM 后绑定该函数。如果你调用代码：
$('.divName as inside loader').live('click',function(){ ...
before the DOM has been updated, jQuery will not be able to bind the event properly. I don't know when you are parsing/setting up the code .live code block. You've got to apply the .live code after you have appended the returned HTML to the DOM, either in the success callback or the function that is called right after the success callback (if there is one).
在 DOM 更新之前，jQuery 将无法正确绑定事件。我不知道你什么时候解析/设置代码 .live 代码块。您必须在将返回的 HTML 附加到 DOM 之后应用 .live 代码，无论是在成功回调中还是在成功回调之后立即调用的函数中（如果有的话）。
Hope this helps.
希望这可以帮助。
回答by nospamthanks
Simple, as the data is appended after the js is loaded you will need to go with...
很简单，因为数据是在加载 js 后附加的，所以您需要使用...
$(selector).live('click', function(e){
alert('this is a click');
});
Be warned that there is a performance hit if you do this a lot, it may be better to manually unbind and rebind in some cases.
请注意，如果您经常这样做会影响性能，在某些情况下手动解除绑定和重新绑定可能会更好。
