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() {

既然你是動態創建的元素，使用文件將委派到子元素的事件，所以這有助於冒泡事件在文檔級別。

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

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

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

的OnClick屬性