Javascript признан недействительным после дом манипуляции

Question

Моя страница состоит из двух компонентов, которые зависят от Javascript. С левой стороны находится базовая навигация по атрибутам (abn). А правая часть - это результат абн.

Существует обработчик событий для abn и обработчик событий для результата (оба по клику) Всякий раз, когда пользователь нажимает на abn, я выполняю ajax-вызов, который возвращает объект json, где html-результат представляет собой значение одной из пары ключ / значение. HTML-код вставляется в компонент результата.

Обработчик события для результата страницы прекрасно работает при обновлении страницы. Он перестает работать, когда я вставляю html-контент в слот результата после вызова ajax. Я убедился, что в результате есть все элементы div и класс, от которых зависит мой javascript.

Я думаю, что когда я заменил html-контент, обработчик javascript просто перестал работать. Может кто-нибудь объяснить, почему это происходит и как я могу это решить?

Answer 1

Когда вы обновляете HTML новыми данными, вы повторно присоединяете какие-либо обработчики событий, которые у вас были ранее?

Возможно, вы заменили элемент, который ранее имел обработчик событий, а теперь нет.

Answer 2

как вы заменяете html контент результата? Я предполагаю, что у вас есть обработчик событий, определенный при загрузке страницы, но вы перезаписываете элемент dom новым элементом dom, который не имеет обработчика событий. Но прежде чем я узнаю больше, мне нужно увидеть код или получить больше объяснений: -)

Answer 3

Вставили ли вы элемент с таким же идентификатором (дублированный идентификатор)?

Answer 4

Они класс, а не див. И у них один класс. Обработчик событий не является частью результата. JavaScript находится внизу страницы, а Результат - вверху. Таким образом, JavaScript находится там. Они не заменяются.

Если вы заменяете элементы новыми элементами через .innerHTML, JavaScript в нижней части страницы не будет повторно выполняться, когда вы это сделаете. Если вы добавляете обработчики событий, используя JavaScript (уровень 2), а не html-атрибуты (уровень 0), эти обработчики добавляются только при первом посещении страницы пользователем. Вы должны вызывать этот код каждый раз, когда размещаете новые элементы DOM на странице.

Конечно, этот ответ может быть совершенно неверным. Мы могли бы сказать, дали ли вы нам пример кода.

Answer 5

Я видел похожее поведение, когда манипулировал DOM с помощью обработчиков событий zaps innerHTML, которые были предварительно настроены, хотя только при замене реальных элементов, к которым были прикреплены обработчики. Это верно для встроенных атрибутов обработчика событий, а также для «правильных» обработчиков событий, подключенных через Javascript.

Лучший способ проверить, происходит ли это, - добавить несколько отладочных операторов в функцию, которая вызывается при нажатии на abn. Если вы не используете отладчик, просто добавьте несколько предупреждений (а затем посмотрите на использование отладчика JavaScript)

function iAmCalledWhenSomeoneClicksOnAbn(){
    alert("I was called, w00t!");
    //...rest of function
}

Первый щелчок (который работает) даст вам предупреждение. Если второй щелчок (который не работает) пропускает предупреждение, вы знаете, что ваши манипуляции с DOM удаляют ваши обработчики событий.

Если второй щелчок все еще дает вам предупреждение, происходит что-то еще. Наиболее вероятный виновник - необработанное исключение Javascript, которое останавливает выполнение. Загрузите отладчик для своего браузера (Firefox / Firebug, IE / Visual Studio Express Web Developer, Safari / Drosera) и следуйте по пути выполнения до тех пор, пока не будет сгенерировано исключение, или вы попадете в ту часть кода, где должно происходить манипулирование DOM. Если вы достигнете более поздней версии, проверьте содержимое всех переменных, а также текущее содержимое DOM, чтобы определить, почему не происходит ожидаемая манипуляция DOM.

Answer 6

Они класс, а не див. И у них один класс. Обработчик событий не является частью результата. JavaScript находится внизу страницы, а Результат - вверху. Таким образом, JavaScript находится там. Они не заменяются.