jquery - 在 jquery 中添加 html 并在新的 html 上使用 jquery

Question

我正在尝试使用 jquery 添加 html，而不是我想根据新添加的 html 执行操作。这是我想要做的例子..

这是我的html

<div id='area'></div>

我使用这个 jquery 命令在本节中添加 html

 $("#area").html('<p id="mynewid">my text</p>');

现在我想在 p 标签中添加文本，我使用了这个命令

$("#mynewid").click(function() {

  $(this).html("my 2nd new text");

});

但它不工作...

Answer 1

你想了解 jQuery on()。

将您的代码更改为；

$('area').on('click', '#mynewid', function(){
    $(this).html("my 2nd new text");
});

这是将事件处理程序添加到 DOM 中动态创建的内容的最佳方式。

您的代码不起作用的原因是因为我怀疑您click()在将新内容添加到#area div. 这意味着 jQuery 会尝试将事件处理程序附加到不存在的 DOM 元素上。

Answer 2

您使用的代码需要在 DOM 准备好后执行。您可以通过将其包含在如下函数中来确保这$(document).ready()一点：

<div id='area'></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script>
$(document).ready(function() {
  $("#area").html('<p id="mynewid">my text</p>');
  $("#mynewid").click(function() {

    $(this).html("my 2nd new text");

  });

});

添加适当的 HTML，此代码适用于我的开发框。