正在分配的onclick函數動態創建按鈕

Question

繼最佳實踐，有回調函數和處理最初父裝載格，我這樣做：

$("#buttons_div"). 
 
html('<input type="button" value="Click me" id="button1" />', function() { 
 
    $("#buttons_div"). 
 
    on("click", "#button1", function() { 
 
    alert("alert") 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="buttons_div"> 
 
</div>

爲什麼這不起作用？

Answer 1

這不起作用。這兩個陳述應該是分開的。您不能將事件處理程序作爲參數傳遞給.html()函數。你需要做的是這樣的：

$(function() { 
 
    $("#buttons_div").html('<input type="button" value="Click me" id="button1" />'); 
 
    $("#buttons_div").on("click", "#button1", function() { 
 
    alert("alert") 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="buttons_div"> 
 
</div>

Answer 2

這是因爲你嵌套html()函數內部的單擊事件。

$("#buttons_div").html('<input type="button" value="Click me" id="button1" />'); 
 
$("#buttons_div").on("click", "#button1", function(){ 
 
    alert("alert") 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="buttons_div"> 
 
</div>

Answer 3

對於動態生成的元素直接JavaScript函數不列入爲元素的作品。因此，您必須使用該動態生成元素的父元素，或者可以使用文檔而不是該父元素。

$(function() { 
$("#buttons_div").html('<input type="button" value="Click me" id="button1" 
/>'); 
$(document).on("click", "#button1", function() { 
alert("alert") 
}); 
}); 

或者您也可以使用該這樣做：

$(function() { 
$("#buttons_div").html('<input type="button" value="Click me" id="button1" 
/>'); 
$("#buttons_div").on("click", "#button1", function() { 
alert("alert") 
}); 
});