jquery .on（）方法，选择器不适用于动态按钮

Question

我有一些代码，我在页​​面上动态添加一个按钮。

<a href=“#1" class="btn btn-default next">Next</a>

我正在使用带选择器参数的.on（）方法，但单击按钮时没有发生任何事情。我看到其他人对动态添加的元素有类似的问题，但他们缺少选择器并添加它解决了它。

$(".next").on("click", ".next", function() {

    alert(“next page");

});

我在加载时将按钮放在页面主体中并且工作正常。它在以后添加到页面时不起作用。

Answer 1

更改

$(".next").on("click", ".next", function() {

到

$(document).on("click", ".next", function() {

由于您是动态创建元素，因此使用document会将事件委托给children元素，这样有助于在文档级别上冒泡事件。

Answer 2

让我们假设ancestor是html中按钮的祖先的选择器。然后：

$(ancestor).on("click", ".next", function() {
    alert("I have clicked on the button");
});

即使此部件运行时您的按钮不存在，此功能仍然有效。如果您没有更具体的祖先，那么您可以使用"body"。

Answer 3

试试这个

您可以使用文档或正文

$(document).on("click",".next", function() {
alert('button clicked');
});

Answer 4

使用可以使用html的onClick属性

＆＃13;

＆＃13;

function myFunction()
{
    alert("hello");
}

＆＃13;

<button onclick="myFunction()">Click me</button>

＆＃13;

＆＃13;

＆＃13;