使用 jQuery 附加帶有點擊事件的 HTML

Question

我想在這個 div 中 append 一些 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

重要的：

考慮到如果您使用最具體的選擇器，性能應該會更好。 對於這種情況，如果您只想影響“MyId”div 中的 div，您應該使用：

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

很重要：

考慮到 on 方法的第二個參數，在本例中為“div”，是可選的，但如果您希望事件自動附加到動態創建的項目，則需要提供它。 這在 jquery 文檔中稱為“on”方法的延遲。 我希望此信息可以為將來閱讀此內容的人節省時間:)

Answer 4

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

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

恭喜我的朋友！