jquery - 单击事件处理程序在就绪时触发，但在单击时不触发

Question

我有一个由 jquery/ajax 添加的按钮，我想在单击时从中获取它的值（数字）。问题是它永远不会触发。如果我即使在 .ready 中也有点击，它会在加载时触发，如果在外面它什么也没发生。

$('.page').on("click", function(event){
    alert("clicked");
}

<button class="page">1</button>

我在这里做错了什么？

Answer 1

请尝试：

$('body').on("click", ".page", function(event){
    alert("clicked");
}

由于您的元素是动态添加的，因此您需要根据页面加载时存在的元素绑定点击事件。理想情况下，您想要一个在 DOM 中比正文更接近的元素，但在最坏的情况下您可以使用它。

从文档：

事件处理程序仅绑定到当前选定的元素；当您的代码调用 .on() 时，它们必须存在于页面上。为确保元素存在并且可以被选择，请在页面 HTML 标记中的元素的文档就绪处理程序内执行事件绑定。如果将新 HTML 注入页面，请在将新 HTML 放入页面后选择元素并附加事件处理程序。