Jquery 事件不适用于 ajax 加载的内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17620211/
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
Jquery events not working on ajax loaded content
提问by Susheel Singh
The below code works. If there is some better way please let me know. If i use the script content which is present in test.html in the main page where I am loading test.html through ajax. The script doesn't work.
下面的代码有效。如果有更好的方法请告诉我。如果我在通过ajax加载test.html的主页中使用test.html中存在的脚本内容。该脚本不起作用。
<html>
<head>
<script src='jquerylocation' type='text/javascript'></script>
</head>
<body>
<div id='ajaxload'></div>
<button class='test'>load content via ajax</button>
</body>
<script>
$(function(){
$('.test').on('click',function(){
$('#ajaxload').load('test.html');
});
});
</script>
</html>
Test.html:
测试.html：
<h1 class='heading'>Page via AJAX</h1>
<script>
$(function(){
$('.heading').on('click',function(){
$(this).css('color','red');
});
});
</script>
we have to load the script along with dynamically loaded content through ajax to work as you require.But disadvantage I felt was each time we send ajax request script loads all the time along with content. But I found only this solution. If anyone knows better solution please reply.
我们必须通过ajax加载脚本和动态加载的内容才能按照您的需要工作。但是我觉得每次发送ajax请求时脚本总是与内容一起加载。但我只找到了这个解决方案。如果有人知道更好的解决方案，请回复。
For example if change the code this way it wont work.
例如，如果以这种方式更改代码，它将不起作用。
<html>
<head>
<script src='jquerylocation' type='text/javascript'></script>
</head>
<body>
<div id='ajaxload'></div>
<button class='test'>load content via ajax</button>
</body>
<script>
$(function(){
$('.test').on('click',function(){
$('#ajaxload').load('test.html');
});
$('.heading').on('click',function(){
$(this).css('color','red');
});
});
</script>
</html>
Test.html:
测试.html：
<h1 class='heading'>Page via AJAX</h1>
回答by Peter Rasmussen
It's because you are binding the event on document ready. You have to use a delegate in order for this to work. Like on. It's because .header isn't on the page on the page when it's loaded. So no event is attached.
这是因为您在文档准备好时绑定事件。您必须使用委托才能使其工作。喜欢上。这是因为 .header 在加载时不在页面上。所以没有附加事件。
Your code should look some along the lines of this:
你的代码应该看起来像这样：
$('body').on('click','.heading',function(){
$(this).css('color','red');
});
It doesn't have to be body, but an element which isn't loaded after document ready, which is a parent of .heading.
它不一定是 body，而是一个在文档准备好后未加载的元素，它是.heading的父元素。
回答by Elias Escalante
One option is to initialize your script on load success:
一种选择是在加载成功时初始化脚本：
$('.test').on('click',function(){
$('#ajaxload').load('test.html',function(){
$('body').on('click', '.heading', function(){
$(this).css('color','red');
});
});
});
