делегировать () класс в TBODY TR

Question

Я экспериментирую с .live() и .delegate() для элементов, которые добавляются в DOM задолго после загрузки моего JS.

Это работает:

$(".mouseRow tbody tr").live("click", function(event) { });

Но это не работает, и никаких ошибок не дано, что заставляет меня думать, что это DOM тайминг:

$(".mouseRow").delegate("tbody tr", "click", function(event) { });

Я неправильно вызываю функцию .delegate(), возможно, с помощью оператора "tbody tr"? Или это проблема с синхронизацией DOM, поскольку элементы еще не существуют (именно поэтому я и использовал live() в первую очередь)?

Answer 1

Если .mouseRow - это класс, который вы применяете к tr элементам, вы хотите: Вы сказали в комментариях, что mouseRow - это класс для элемента table вкоторые вы хотите зацепить кликами по tr элементам.Если элементы table.mouseRow будут существовать на момент подключения ваших обработчиков, вы, вероятно, захотите следующее:

$("table.mouseRow tbody").delegate("tr", "click", function(event) { ... });

, который перехватывает событие click на tbody в пределах table.mouseRow,и когда это происходит, проверяет цепочку элементов от фактически нажатой до tbody, чтобы увидеть, соответствует ли какой-либо из них селектору tr.Если это так, он вызывает обработчик событий с this, ссылающимся на соответствующую строку.

Или, начиная с jQuery 1.7, рекомендуется использовать on для такого рода вещей:

$("table.mouseRow tbody").on("click", "tr", function(event) { ... });

(Обратите внимание, что порядок аргументов немного отличается.)

В любом случае, вы выполняете этот оператор, когда table.mouseRow tbody уже находится в DOM.Если этого еще не будет, вам нужно пройти дальше по DOM, возможно, вплоть до document:

$("table.mouseRow tbody tr").live("click", function(event) { ... });
// or (1.7 onward):
$(document).on("click", "table.mouseRow tbody tr", function(event) { ... }));