jQuery

Как заставить скрипт jQuery видеть изменения на странице html?

У меня на странице html происходит поиск информации с выводом результата в DIV через скрипт jQuery:

$.ajax({
type: 'POST',
url: 'subdivision_change.php',
data: 'cod=' + x.value + '&x1=' + x1.value + '&x2=' + x2.value + '&x3=' + x3.value + '&x4=' + x4.value,
success: function(data){
...
}
});

Содержимое результата - таблица html.
При этом я хочу чтобы на главной странице работал скрипт, который взаимодействовал бы с этой таблицей:

$(document).ready(function() {
$('tr.myLinkModal').click( function(event){
x.value = this.id;
x1.value = document.getElementById('z1_' + this.id).innerText;
event.preventDefault();
$('#myOverlay').fadeIn(297,function(){
$('#myModal')
.css('display', 'block')
.animate({opacity: 1}, 198);
});
});
});

Но скрипт с возвращаемой таблицей НЕ РАБОТАЕТ. Он срабатывает только с той таблицей, которая отображается при первичной загрузке страницы, до выполнения скрипта поиска и вывода новой результирующей таблицы. Я в js не силен ( в каком направлении мне лучше двигаться? не могу в интернете ничего подобного найти... (
Миша Минион
Миша Минион
353
http://jquery.page2page.ru/index.php5/On - раздел про делегированную обработку

$(document).on('click', 'tr.myLinkModal', function(event) {
...
});

Не надо:
data: 'cod=' + x.value + '&x1=' + x1.value + '&x2=' + x2.value + '&x3=' + x3.value + '&x4=' + x4.value,
Правильно:
data: {cod: x.value, x1: x1.value, x2: x2.value, x3: x3.value, x4: x4.value},
Евгений Рыжов
Евгений Рыжов
90 882
Лучший ответ
Миша Минион Спасибо. Вы меня спасли)
Потрясающая логика, "я хочу, а он не делает - значит он НЕ РАБОТАЕТ" :)
Скрипт работает. Просто он работает в точности так, как написано. Если ты не написал кода для обработки событий на динамически добавляемых элементах - с чего бы скрипту их обрабатывать?

Есть несколько путей решения подобных задач:
• делегирование обработки событий
 • используя словарь
 • используя фильтрацию по свойствам target
• добавление слушателей самим динамически создаваемым элементам
jQuery умеет делегирование по словарю, и в данном случае это будет выглядеть так:
$('.closest-static').on('click', '.my-link-modal', yourHandlerFunc);

Обрати внимание на три вещи:
1. Вешай обработчики на ближайший статичный контейнер. Не стоит вешать их на document, как советует предыдущий ответ - это говнокод, и даже в оф. документации рекомендуют такого не делать. Подобное допустимо только если событие ловится на стадии захвата, а jQuery.on этого не может (в отличие от стандартного aEL).
2. Старайся избегать селекторов сочетающих тип элемента и класс/атрибут. Это больше относится к CSS, но в данном случае тоже критично. У тебя класс уже хорошо назван, tr в селекторе лишний.
3. Лучше сразу привыкать использовать общепринятую нотацию имен id и class (kebab-case), чтобы в будущем не пришлось мучительно переучиваться. Это может показаться незначительным сейчас, но самые простые привычки - самые въедливые :)

>> в каком направлении мне лучше двигаться?
В направлении избавления от jQuery.
Отказ от использования этой библиотеки, принесет тебе только хорошее.
EA
Erkebulan Adilkhanov
92 009
Миша Минион Спасибо) Приношу извинения за свою неграмотность...

Похожие вопросы