Question

我正在尝试通过jquery向div添加跨度。这些跨度应该有一个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。

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

我在哪里吹过它？

Answer 1

试试这个：

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

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

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

Answer 2

使用delegate比使用live更好：

$('#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示例

Answer 3

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

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

在1.7之前（但是在@Greg Pettit指出的1.4.2之上或之后）执行此操作：

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

此外，您可以在CSS中使用<br>以外的其他元素，而不是使用span。

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

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

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

Answer 4

使用live：

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

通过jQuery添加单击事件的span

4 个答案: