Question

所以我有一个用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()，以防万一事件被绑定到DOM元素两次。但这没有用。

我正在使用标准$.ajax({type:'GET',dataType:'text'});调用加载页面，此代码正常运行。问题不在于我们如何通过AJAX加载页面，问题是加载两次的页面导致.on('click')函数停止工作。

我们已经通过使用PHP在按钮标记id和jQuery选择器的末尾添加随机字符串来解决这个问题，所以我假设每个页面加载使用相同的选择器是问题，但是我希望有更多知识的人可以对这种情况有所了解。

有人可以向我解释，为什么第二次加载页面会阻止按钮被点击？

Answer 1

尝试事件委托，语法为：

$( "body" ).on( "click", "#clickable", function( event ) { /*do something*/ });

更多信息here

使用AJAX加载页面两次会导致.on（'click'）停止运行

1 个答案: