Добавленный HTML-код, содержащий JavaScript, не запускается. Как его запустить?

Question

Я добавляю HTML-код, содержащий JavaScript.

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

и

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

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

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

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

РЕДАКТИРОВАТЬ:

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

Редактировать2:

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

Answer 1

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

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

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

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

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

В ПрототипJS, это может выглядеть так:

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 к объекту.

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

ИЕ:

Object.onclick = someFuntion

ФФ:

Object.addEventListener('click', someFunction);

Answer 4

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

Answer 5

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

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

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