Привязывать обработчики событий Javascript к ответу HTML Ajax?

Question

Допустим, у меня есть следующий HTML-код

<div id="outer">
<div id="inner">Hello World</div>
</div>

В конце моей HTML-страницы я использую javascript для подключения обработчиков событий, например,

document.getElementById('inner').onclick = function() {alert(this.innerHTML);}
document.getElementById('outer').onclick = function() {
/* An Ajax Call where the response, which will be a string of HTML content, then goes into document.getElementById('outer').innerHTML */

document.getElementById('inner').onclick = function() {alert(this.innerHTML);}

}

В приведенном выше коде я ожидаю возвращения <div id="inner">Hello World 2</div>, что требует от меня повторного подключения обработчика события onclick. Это имеет смысл, потому что новый ответ, возвращающийся - это просто строка, и я должен сообщить браузеру, что после преобразования в DOM мне также понадобятся некоторые обработчики событий

Итак, мой вопрос: есть ли лучший способ управления обработчиками событий в ответе AJAX, который содержит HTML-контент? Я мог бы использовать встроенный javascript в ответе html, но тогда это мешает мне достичь неинтрузивного javascript. Так есть ли способ добиться ненавязчивого javascript и эффективный способ «поддерживать» обработчики событий html-ответов ajax?

Answer 1

Бен Нолан сделал хороший фреймворк, однажды названный «Поведение». С тех пор он отказался от этого, но идея все еще здрава. Идея заключалась в том, чтобы поместить ваши обработчики событий в «листы» (просто объекты javascript) под свойствами, названными с помощью селекторов CSS.

Вы можете использовать такой объект, как этот:

{
    '#inner': function() { ... }
}

Общая функция может повторять свойства такого объекта, когда это необходимо для повторного применения обработчиков событий.

У меня здесь хранится старая копия поведения: http://www.kruse -net.dk / javascript / lib / поведение-1.2.js , которую вы можете черпать вдохновение или использовать.

Answer 2

Вы можете использовать что-то вроде jQuery live . Он позволяет привязать обработчик событий к элементам, которые соответствуют селектору сейчас и в будущем.