Javascript 使用AJAX原因加载页面两次。在（'；单击'；）上停止运行

所以我有一个用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>

$（文档）.ready（函数（e）{
console.log（'binding clickable'）；
console.log（$（'#clickable'）.length）；
$（“#可单击”）.off（）；
$（'#clickable'）。在（'click'，function（）上{
log（'hello'）；
});
});
新页
废话废话

好啊

所以，当我用AJAX加载这个页面时，它工作得很好

当我加载这个页面，然后加载另一个页面，然后再次加载这个页面时，它工作正常

但是，当我加载此页面，然后再次加载此页面时，

#可单击的

按钮不再起作用

当我在控制台中查看时，我可以看到

绑定可单击

，因此

$（document）.ready（）

功能正在正常运行。在控制台的下面，我可以看到数字

1

，因此我知道jQuery选择器

“#clickable”

正在查找DOM元素ok

我添加了行

$（'#clickable'）.off（）

，以防事件被绑定到DOM元素两次。但这没用

我正在用标准的

$.ajax（{type:'GET'，dataType:'text}）加载页面调用，此代码工作正常。问题不在于如何通过AJAX加载页面，问题在于加载两次页面会导致
.on（'click'）
函数停止工作

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


有人能给我解释一下，为什么第二次加载页面会阻止按钮被点击
尝试事件委派，语法为：

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

更多信息
尝试事件委派，语法为
$（“body”）。在（“单击”，“可单击”，函数（事件）{/*执行操作*/}），更多信息：@Varinder非常感谢-查看并使用它对我很有用！把这个作为答案，我会给你打上正确的分数！哦，太酷了，谢谢你，伙计：）