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

Я добавляю некоторый 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:

даже со всей дискуссией об этом, спасибо за ответы, заставил его работать.

8
dom dom-manipulation html javascript

5 ответов

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

Сначала добавьте атрибуты 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) приятно, потому что оно заботится о кросс-браузерной совместимости.

4

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

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

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

3

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

это с моей головы, но... Я думаю, вы можете сделать это так:

IE:

Object.onclick = someFuntion

FF:

Object.addEventListener('click', someFunction);
1

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

0

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

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

(Edit: IE называет это attachEvent(). Надеюсь, это поможет.)

0