使用jQuery添加带有点击事件的HTML

Question

我想在这个 div 内追加一些 HTML，并且这段 HTML 还需要具有点击事件。

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

我想在上述div内插入一个新的div，并且我想在那里插入的新HTML上添加点击事件。新div中会有一些动态文本，因此必须通过动态创建来实现。

如何实现？

- mrblah

Answer 1

那么这个怎么样：

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

- Paul

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

- Andrew

---

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

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”方法的延迟。我希望这些信息能够为将来阅读此内容的人节省时间 :)

- tomasofen

Answer 4

Andrew 给我解决了这个问题！但是 .live 已经在 jQuery 的最新版本中被弃用（从 1.7 开始）。请使用 .on 或 .delegate 在 top.document 上绑定这些事件类型。具体请参见：

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

恭喜你，我的朋友！

- Rodolfo Jorge Nemer Nogueira

---

难道不应该是反过来的吗，即".myClass","click"？ - João Ciocca