Question

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

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

我想在上面的div中插入一个新的div，我想在新的HTML上插入一个click事件。新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”，是可选的，但如果您希望事件自动附加到dinamically创建的项目，则需要提供它。这在“on”方法的jquery文档中称为延迟。我希望这些信息为将来阅读此内容的人节省时间：）

Answer 4

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

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

恭喜我的朋友！

使用jQuery附加HTML w / click事件

4 个答案: