使用jQuery附加HTML w/click事件

Question

我想在div內追加一些HTML，並且HTML也必須在它上面有一個單擊事件。

<div id="myID"> 
     <p>hello, world!</p> 
    </div> 

我想在上面的div中插入一個新的div，並且我希望在這裏插入的新HTML的點擊事件。在新的div中會有一些動態文本，所以它必須通過動態創建。

怎麼辦？

Answer 1

什麼：

$("#myID").click(
    function() { 
    var someText = "my dynamic text"; 
    var newDiv = $("<div>").append(someText).click(function() { alert("click!"); }); 
    $(this).append(newDiv); 
    } 
) 

Answer 2

在jQuery 1.3，這將工作：

<div class="myClass"> 
<p>hello, world!</p> 
</div> 


$(".myClass").live("click", function(){ 
    $(this).after("<div class='myClass'><p>Another paragraph!</p></div>"); 
}); 

查看更多有關此頁面上的現場活動：

http://docs.jquery.com/Events

Answer 3

安德魯解決這個問題給我！但.live在jquery的最新版本中已棄用（截至1.7版本）。在top.document上使用.on或.delegate來綁定這些事件類型。參見：

$(document).on(".myClass", "click", function(){ 
    $(this).after("<div class='myClass'>Another paragraph!</div>"); 
}); 

恭喜我的朋友！

Answer 4

重要：

考慮到其性能應該會更好，如果你使用的最具體的選擇。對於這種情況，如果你想隻影響了「身份識別碼」 DIV裏面的div，你應該使用：

$("#MyId").on("click", "div", function(e) { 
    // Whatever you want to do when the divs inside #MyId div are clicked 
}); 

非常重要：

考慮到，對於在方法的第二個參數，在這種情況下，「div」是可選的，但如果您希望將事件自動附加到dinamically創建的項目，則需要提供它。這在jQuery文檔中稱爲「on」方法。我希望這個信息可以爲將來有人閱讀這篇文章節省時間:)