使用 jQuery 附加 HTML w/click 事件答案

【问题标题】：Appending HTML w/click event using jQuery使用 jQuery 附加 HTML w/click 事件
【发布时间】：2010-10-09 17:38:13
【问题描述】：

我想在这个 div 中添加一些 HTML，并且 HTML 上也必须有一个点击事件。

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

我想在上面的 div 中插入一个新的 div，并且我想在我插入的新 HTML 上单击事件。新 div 中会有一些动态文本，因此必须动态创建。

怎么做？

【问题讨论】：

标签： jquery html

【解决方案1】：

重要提示：

考虑到如果您使用最具体的选择器，性能应该会更好。对于这种情况，如果您只想影响“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”方法的延迟。我希望这些信息可以为将来阅读此内容的人节省时间:)

【讨论】：

【解决方案2】：

安德鲁帮我解决这个问题！但是 .live 在最新版本的 jquery 中已被弃用（从 1.7 开始）。在 top.document 上使用 .on 或 .delegate 来绑定这些事件类型。见：

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

恭喜我的朋友！

【讨论】：

会不会反过来，"click",".myClass"？

【解决方案3】：

从 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

【讨论】：

你是对的，live方法是这个问题的正确答案。

【解决方案4】：

怎么样：

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

【讨论】：