追加元素后需要點擊觸發

Question

請看下面的代碼：

HTML：

<p>Click this paragraph.</p>

JS：

$("p").live("click", function(){
    alert("The paragraph was clicked.");  

    $("body").append("<p>This was newly added. this has also click</p>")
});

現在，該元素可以正確附加。 但是單擊不會觸發附加元素。 如果我使用的live ，而不是on其工作的罰款。 但是生活被貶值了。 該怎么辦。

的jsfiddle

Answer 1

對.on使用委托樣式

.on（事件[，選擇器] [，數據]，處理程序）

• events類型：String一個或多個用空格分隔的事件類型和可選的名稱空間，例如“ click”或“ keydown.myPlugin”。
• 選擇器類型：字符串一個選擇器字符串，用於過濾觸發事件的所選元素的后代。 如果選擇器為null或省略，則事件在到達所選元素時始終被觸發。
• 數據類型：任何事件觸發時將在event.data中傳遞給處理程序的數據。
• handler類型：Function（Event eventObject [，Anything extraParameter] [，...]）觸發事件時執行的函數。 還可以將值false用作簡單地確實返回false的函數的簡寫。

由於您不想傳遞數據，因此可以使用以下形式編寫：

$(body).on('click', 'p', handler)

省略了數據參數。

 $("body").on("click", "p", function(){ alert("The paragraph was clicked."); $("body").append("<p>This was newly added. this has also click</p>") }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <p>Click this paragraph.</p> 

Answer 2

更改為此：

$("body").on("click", "p", function(){
    alert("The paragraph was clicked.");  

    $("body").append("<p>This was newly added. this has also click</p>")
});

的jsfiddle

您不希望使用p因為那只會對頁面上已經存在的p元素起作用，因此添加的新元素將無法工作。

如果您使用body並將其設置為單擊p ，執行此功能，它將起作用。