通过 jQuery 添加带有点击事件的跨度答案

【问题标题】：Add span's with click events via jQuery通过 jQuery 添加带有点击事件的跨度
【发布时间】：2012-01-10 20:32:24
【问题描述】：

我正在尝试通过 jquery 将跨度添加到 div。这些 span 应该有一个 onclick 事件。跨度似乎已添加，但新创建的元素的点击事件不会触发。我在 jQuery 上一文不值，不确定我错过了什么。任何帮助表示赞赏。

以下是一些相关代码：

<script type='text/javascript'>
$(window).load(function(){
     $('#Match .WordSpan').click(function() {
          alert($(this).html());
          $('#Match').append('<span>me too!</span><br/>').html();
          $("span:last").addClass("WordSpan").html();
     });
});
</script>

<input type="text" id="WordInput"  />
<div id="Match">
     <span class="WordSpan">click me!</span><br />
</div>

我在小提琴here。

我希望代码能做的是，在点击硬编码的“点击我”跨度后，下面会添加另一个跨度。单击时，该跨度将添加另一个 saecula saeculorum。

我把它吹到哪里去了？

【问题讨论】：

一个非常小的东西。但是您可以使用以下命令清理代码： $('#Match').append('me too!
');保存在 DOM 中的旅行。甚至可能使用 $(this).after('Your new span here');为您节省更多电力，但我不太确定。

标签： jquery html

【解决方案1】：

使用delegate 比使用直播效果更好：

$('#Match').delegate('span.WordSpan', 'click', function() {
    alert($(this).html());
    $('#Match').append('<span>me too!</span><br/>');
    $("span:last").addClass("WordSpan");
});

如果使用 jquery 1.7+，则使用 on 而不是委托。 jsFiddle例子

【讨论】：

立即给出 3 个很好的答案，但我要给你奖品，因为根据“.live”上的 jQuery 文档，它在 1.7 中已被弃用，而“.delegate”应该在旧版本中使用.非常感谢！

【解决方案2】：

试试这个：

$('#Match .WordSpan').live('click', function()....

小提琴：http://jsfiddle.net/maniator/kLJ3J/3/

_{^{我还在末尾删除了那些随机的html()。不知道为什么你有那些...}}

【讨论】：

根据小型评论，.html() 没有意义。此外，由于 .live() 在 jQuery 1.7+ 中已被弃用，这里是 Neal 的代码修改为使用 jQuery 1.7.1 和 .on() 函数：jsfiddle.net/kLJ3J/8
我也不知道我为什么这样做...只是在问题上扔代码，希望它会消失，我猜..

【解决方案3】：

从 jQuery 1.7 开始，执行以下操作：

 $('#Match').on('click','.WordSpan',function() {
      alert($(this).html());
      $(this).append('<span class="WordSpan">me too!</span><br/>');
 });

在 1.7 之前（但在 1.4.2 或之后，如 @Greg Pettit 所述）这样做：

 $('#Match').delegate('.WordSpan','click',function() {
      alert($(this).html());
      $(this).append('<span class="WordSpan">me too!</span><br/>');
 });

此外，也许您可以在 CSS 中处理它，或者使用 span 以外的元素，而不是使用 <br>。

如果你这样做，你可以使用这种创建元素的形式：

$('<span>',{className:'WordSpan',text:'me too!'}).appendTo(this);

jQuery 已内置优化以这种方式创建元素。

【讨论】：

在 1.7 之前但在... 1.4 之后？ .delegate() 的寿命相对较短。

【解决方案4】：

使用live：

$('#Match .WordSpan').live("click", function() {
    $('#Match').append('<span class="WordSpan">me too!</span><br/>');
    $("span:last").addClass("WordSpan");
});

【讨论】：