2013-10-11 3 views
1

Я хочу скопировать элемент span внутри элемента id test. Я знаю, что .clone работает нормально. Но если я использую .html вот так .click функция не работает. Где я ошибся. Как я могу подойти к этому только с помощью .html()Почему функция здесь не работает - jquery?

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(); 

Code in fiddle

+2

Почему вы обертывание нажмите функция в другой js-функции? –

+2

Поскольку добавленный элемент не является дочерним элементом '# test'. – undefined

+0

Bcz вам нужно прикрепить событие click на дочернем узле. Событие click по-прежнему регистрируется в '# test' даже после добавления. –

ответ

3

Моего понимания Вашего вопроса в том, что вы хотите, чтобы обработчик щелчка, чтобы применить к скопированному диапазону элементу.

Вы должны изменить сферу действия на событие щелчка, чтобы покрыть клонированный элемент, как так:

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');  
}); 
+0

, пожалуйста, обратитесь к ссылке jsfiddle.net/hSPCr/1, почему скопированное поле элемента не очищается. – user2587222

+0

Это потому, что вы используете строковый результат .html(), как если бы это был объект jQuery. Сравните то, что у вас есть с этой вилкой: http://jsfiddle.net/chrispickford/VemaF/1/ –

2

Причина это не работает, потому что вы 'клонирование элемента в другой селектор (#test1), но y ou're только глядя на #test прослушивать событие щелчка ..

Это, как я хотел бы сделать это: http://jsfiddle.net/ChubbyNinja/6fv4A/1/ (с помощью ваших двух идентификаторов)

Или http://jsfiddle.net/ChubbyNinja/6fv4A/3/ используя класс в качестве селектора, как классы может использоваться несколько раз.

+0

или использовать класс вместо идентификатора – DanFromGermany

+0

я уже обновлен до этого :-) –

+0

функция testtt() { вар р-р = $ ('# тест') HTML(). $ ('# test'). Append (rr); $ (rr) .val (''); } testtt(); почему скопированное поле элемента не очищается – user2587222

0

Копирование его html не совпадает с клонированием. Вы можете быть менее специфичными при применении прослушивателя:

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

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

Смежные вопросы