Добавленный HTML, который содержит javascript, не запускается, как я могу заставить его работать?

Question

Я добавляю немного HTML, содержащего JavaScript.

<td onclick="toggleDay('+data+',this,\'tue\');">T</td>

и

<img src="img/cross.png" onclick="deleteAlarm('+data+');">

Эти два фрагмента кода содержат большое количество HTML-кода, который я добавляю.

Они отлично работают, если они уже есть при загрузке страницы, но не при добавлении.

Что вы предлагаете мне сделать? Нужен ли какой-то запрос сортировки для DOM, чтобы он заново интерпретировал JavaScript после добавления или?

EDIT:

Просто еще немного информации, я с этой проблемой, потому что я добавляю некоторые вещи с AJAX в базу данных, и в случае успеха я добавляю html туда, где он должен быть. В некотором роде так же, как и с комментариями.

Edit2:

Даже несмотря на все обсуждения, спасибо за ответы, все заработало.

Answer 1

Я бы сделал это так:

Сначала добавьте атрибуты id в ваш html:

<td id="toggleDayCell">T</td>

<img src="img/cross.png" id="crossImg">

Затем создайте Javascript, который запускается в событии onload страницы и присоединяется к интересующим вас событиям.

В PrototypeJS это может выглядеть так:

Event.observe(window, 'load', function(){
  if( $('toggleDayCell') ) {
    Event.observe( $('toggleDayCell'), 'click', function(event){
      //do stuff here
    }
  }

  if( $('crossImg') ) {
    Event.observe( $('crossImg'), 'click', function(event) {
       //do stuff here
    }
  }
});

Хорошо использовать что-то вроде Prototype (или jQuery), поскольку оно заботится о совместимости с различными браузерами.

Answer 2

Вы добавляете HTML через AJAX? Если это так, вам придется вручную eval () JavaScript, который вы возвращаете. Вы можете заключить ответ в div и сделать что-то вроде этого:

wrapper.getElementsByTagName("script")
// for script in wrapper...
eval(script.innerHTML)

Если вы используете подобную прототипу библиотеку, это будет намного проще, поскольку вы можете передать ответ методу evalScripts ().

Answer 3

Добавьте HTML к документу, затем программно добавьте событие onclick к объекту.

Это не в моей голове, но ... я думаю, вы можете сделать это следующим образом:

IE:

Object.onclick = someFuntion

FF:

Object.addEventListener('click', someFunction);

Answer 4

AJAX имеет некоторые причуды ... особенно с IE. Пример: вы не можете использовать свойство innerHTML для вставки / обновления чего-либо в элементе таблицы (в IE). Лучше использовать функции DOM для вставки / обновления / удаления узлов элементов (или добавления обработчиков событий). Вы можете использовать упомянутую функцию eval () для запуска динамически загружаемого JavaScript, который изменяет документ с использованием объектов DOM.

Answer 5

Вы должны использовать addEventListener('click', /*...*/) вместо установки onclick в innerHTML или чем-либо еще.

IE вызывает addEventListener что-то еще, поэтому вам придется компенсировать это тоже.

(Правка: IE называет его attachEvent(). Надеюсь, это пригодится.)