所以我有一个使用 AJAX 加载的页面，页面如下:
<script>
$(document).ready(function(e){
console.log('binding clickable');
console.log($('#clickable').length);
$('#clickable').off();
$('#clickable').on('click',function(){
console.log('hello');
});
});
</script>
<h1>New Page</h1>
<p>Blah blah blah...</p>
<div class="button" id="clickable">OK</div>
因此，当我使用 AJAX 加载此页面时，它工作正常。
当我加载这个页面，然后加载另一个页面，然后再次加载这个页面时，它工作正常。
但是，当我加载此页面，然后再次加载此页面时 - #clickable 按钮不再起作用。
当我查看控制台时，我可以看到 binding clickable，因此 $(document).ready() 函数运行正常。在控制台的下方，我可以看到数字 1，所以我知道 jQuery 选择器 '#clickable' 可以正常找到 DOM 元素。
我添加了行 $('#clickable').off() 以防事件被绑定(bind)到 DOM 元素两次。但这没有帮助。
我使用标准的 $.ajax({type:'GET',dataType:'text'}); 调用加载页面，这段代码工作正常。问题不在于我们如何通过 AJAX 加载页面，问题在于页面加载两次导致 .on('click') 函数停止工作。
我们已经通过使用 PHP 将随机字符串添加到按钮标记 id 和 jQuery 选择器的末尾解决了这个问题，所以我假设为每个页面加载使用相同的选择器是问题，但我希望有更多知识的人可以阐明这种情况。
- 谁能给我解释一下，为什么第二次加载页面时按钮无法点击？
最佳答案
尝试事件委托(delegate)，语法为:
$( "body" ).on( "click", "#clickable", function( event ) { /*do something*/ });
更多信息 here
关于javascript - 使用 AJAX 加载页面两次会导致 .on ('click' ) 停止运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21626858/