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

Question

I want to copy the span element inside the id test element. I know .clone is working properly.But if i use .html like this .click function is not working. Where i did mistake. how can i approach this only using .html()

HTML :

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

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

Script :

function testtt (){

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

        alert('hi');

    });

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

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

}    
testtt();

Code in fiddle

Answer 1

My understanding of your question is that you want the click handler to apply to the copied span element.

You need to change the scope of the on click event to cover the cloned element like so:

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

The reason it's not working is because you're cloning the element into a different selector ( #test1 ) but you're only looking at #test to listen for the click event..

This is how i'd do it: http://jsfiddle.net/ChubbyNinja/6fv4A/1/ (using your two ids)

Or http://jsfiddle.net/ChubbyNinja/6fv4A/3/ using a class as a selector, as classes can be used multiple times..

Answer 3

Copying its html is not the same as cloning it . You can be less specific when applying your listener:

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

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