События, связанные с JQuery DOM, не работают после DOM-манипуляции

Question

Я пытаюсь удалить все лишние пробелы из большой большой таблицы html (вид MVC Razor) в качестве исправления большой таблицы IE9, чтобы он отображался правильно в браузере IE9, а ниже пример кода для этого:

var response_html =$('#section1').html(); 
     response_html = response_html.replace(/td>\s+<td/g,'td><td'); 
     response_html = response_html.replace(/tr>\s+<tr/g,'tr><tr'); 
     $('#section1').html(response_html); 

Но после того, как работает этот кусок кода все ранее присоединенные DOM события внутри ячеек таблицы (Datepicker, флажков TextBox событий) не работает вообще. Не могли бы вы, ребята, помочь мне разобраться с этим?

Заранее спасибо.
Mik

Answer 1

При изменении .innerHTML для ведущего элемента (который является тем, что делает .html(x)), которая воссоздает все дочерние DOM элементы этого ведущего элемента. Таким образом, все обработчики событий, которые были у вас на этих элементах, теперь исчезли, потому что исходные элементы DOM, к которым были привязаны обработчики событий, были выброшены.

Вы в основном есть три варианта для фиксации этого:

1. Не менять .innerHTML. Вместо этого инкрементно добавляйте или удаляйте или модифицируйте отдельные элементы DOM, поэтому большие фрагменты элементов DOM, которые не нуждаются в изменении, не воссоздаются.

2. Восстановите обработчики событий на новых элементах DOM после того, как элементы DOM будут воссозданы.

3. Использовать делегированную обработку событий на родительском элементе, который сам не воссоздан. Таким образом, элементы, к которым привязаны обработчики событий, никогда не воссозданы, и поэтому обработчики событий не теряются.

В вашем конкретном случае, это выглядит, как вы только удаление белого пространства между <td> и между <tr> тегами. Прежде всего, я бы спросил, почему вы это делаете. Считаете ли вы, что это действительно влияет на то, как страница отображается?

Вот некоторые ссылки о том, как сделать делегированную обработку событий:

jQuery .live() vs .on() method for adding a click event after loading dynamic html

Does jQuery.on() work for elements that are added after the event handler is created?