javascript - 为什么 on 函数在这里不起作用 - jquery？

Question

我想复制 id 元素内的 spantest元素。我知道.clone工作正常。但如果我.html像这样使用，这个.click功能就不起作用。我在哪里做错了。我怎么能只使用 .html() 来解决这个问题

HTML：

<div id="test">
    <span class="new">hi</span>    
</div>

<div id="test1"></div>

脚本 ：

function testtt (){

    $('#test').on('click','.new',function(){

        alert('hi');

    });

    var rr  = $('#test').html();

    $('#test').append(rr);

}    
testtt();

小提琴中的代码

Answer 1

我对您的问题的理解是您希望单击处理程序应用于复制的 span 元素。

您需要更改 on click 事件的范围以覆盖克隆的元素，如下所示：

HTML：

<div id="test" class="clickable">
    <span class="new">hi</span> 
</div>
<div id="test1" class="clickable"></div>

JS：

$('div.clickable').on('click','.new',function(){
    alert('hi');    
});

Answer 2

它不起作用的原因是因为您将元素克隆到不同的选择器（#test1）中，但您只是在#test查看单击事件。

我就是这样做的：http: //jsfiddle.net/ChubbyNinja/6fv4A/1/（使用你的两个ID）

或者http://jsfiddle.net/ChubbyNinja/6fv4A/3/使用类作为选择器，因为类可以多次使用..

Answer 3

复制它的 html 与克隆它不同。应用侦听器时，您可以不那么具体：

 $('body').on('click','.new',function(){...

http://jsfiddle.net/6fv4A/4/