代码之家 › 专栏 › 技术社区 › user3352464

JavaScript代码不适用于另一段JavaScript代码创建的元素[重复]

frontend web-deployment html jquery javascript

user3352464 · 技术社区 · 10 年前

这是我试图执行的任务:

单击元素“a”后,jQuery生成了一些其他元素,例如“p”。然后,如果点击JS生成的“p”,就会弹出一个消息框。

$(".original").click(function(){
  var p=$('<p>').text("hahahahahaha");
  $(p).addClass("createdByJS");
  $(".main").append($(p));
});

$(".createdByJS").click( function(){
  alert("hello World!");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <a class="original">test</p>
</div>

如果我删除了$(“a”).click(function()事件,但仍然有jQuery在那里生成“p”,那么一切都正常。但是,如果“p”是在单击“a”时生成的,那么我就不能向它添加更多的jQuery函数。

我对编码还是个新手。如果有人能帮我找到解决方案,我将非常感激。

非常感谢你!

1 回复 | 直到 7 年前

Shiladitya 7 年前

你需要 delegate 将事件添加到在添加新元素时存在的元素。在这种情况下 document .

http://learn.jquery.com/events/event-delegation/

演示: http://jsfiddle.net/robschmuecker/ux3n8/2/

$(".original").click(function () {   
  var p = $('<p>').text("hahahahahaha");
  $(p).addClass("createdByJS");
  $(".main").append($(p));
});

$(document).on('click', '.createdByJS', function () {
  alert("hello World!");
});