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

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中比身体更接近的元素，但最坏的情况是你可以使用它。

来自docs：

  

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