Метод jQuery html () отменяет привязку событий к элементам во внутреннем html после замены? - PullRequest
Новая
       2

Метод jQuery html () отменяет привязку событий к элементам во внутреннем html после замены?

2 голосов
/ 10 февраля 2012

Я столкнулся с интересной проблемой. На моем сайте я динамически меняю содержимое при наведении на определенную ссылку. Это достигается чем-то похожим на: 

$('#box').html($('#newcontent').html());

Теперь внутри этой #newcontent части есть <button> -элемент, которому я назначил событие щелчка следующим образом: (внутри функции $(document).ready()) 

$("button#buttonName").click(function(){
  $("div#containerName").toggleClass("hidden");
  }

hidden - это класс css, который делает отображение: нет магии. Контейнер #containerName является вне и элементом, содержащим кнопку, и элементом, содержащим структуру, которая изменяется с помощью html().

Макет конструкции на данный момент 

<div id="somethingthatwhenhoveredoverwillswapthecontent">Hover over me!</div>

<div id="box">Change me!</div>

<div id="newcontent" class="hidden">I am renewed!
  <button id="buttonName">Show the weird box at the bottom</button>
</div>

<div id="containerName" class="hidden">
  I am content that is only shown when the button is clicked
</div>

Итак, что происходит так: страница загружена, скрипт подкачки контента работает нормально, но кнопка не вызовет событие щелчка, которое по причинам тестирования даже не дало alert('whatever');. Похоже, что когда html () меняет содержимое с <div id="newcontent"> на <div id="box">, , событие становится несвязанным (подозреваю).

Это просто я не понимаю концепцию или весь подход сделан неправильно?

1 Ответ

2 голосов
/ 10 февраля 2012

За кулисами jQuery создает новый элемент DOM, а не делает «копию» оригинала.Из-за этого у него нет обработчика события оригинала.Вы можете либо вручную переназначить обработчики вместе с вашим вызовом html(), либо вы можете использовать delegate(), чтобы добавить событие, например:

...