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

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");
}

由于元素是动态添加的，因此需要基于页面加载时存在的元素绑定 click 事件。理想情况下，你想要一个在 DOM 中比主体更接近的元素，但最坏的情况你可以使用它。

从文档中：

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