JQuery возникают проблемы при выборе элемента из загруженного div

Question

Итак, у меня есть контейнер div, внутри которого, используя .load, я загружаю некоторый контент из db, после .load результат будет примерно таким:

<div id="results">
  <div id="a1" class="search-result"></div>
  <div id="a2" class="search-result"></div>
</div>

Насколько я понимаю, я должен иметь возможность выбирать вложенные div, используя $ ("# results .search-result"), но я просто не могу заставить его работать. Если я попытаюсь:

$("#results .search-result").click(function() {
 alert('click');
}

это просто не похоже на работу. Это работает, если я использую:

$("#results").click(function() {
 alert('click');
}

Единственное, о чем я могу думать, это то, что, поскольку вложенные div загружаются с использованием .load, тогда он может не увидеть их?

любая помощь?

Answer 1

Если эти результаты поиска добавляются после факта, вам нужно использовать live().

$("#results .search-result").live("click", function() {
  alert('click');
});

Плюс в вашем коде была синтаксическая ошибка (обратите внимание на последнюю строку). Рекомендуется просматривать консоль ошибок, чтобы увидеть такие ошибки JS.

Наконец, я предполагаю, что ваш фрагмент - это упрощение, потому что у вас есть (в зависимости от вашего CSS) нулевая высота, поэтому вы не сможете нажать на нее.

Answer 2

$().click() просто добавляет обработчик кликов, соответствующий элементу, который существует во время вызова функции click(). Если вы хотите, чтобы обработчик событий был добавлен к элементам, которые добавляются позже, используйте функцию live()

Answer 3

Обработчики событий присоединяются к элементам DOM в вашем примере и стираются при загрузке div, потому что элементы заменяются. Попробуйте вместо этого:

$("#results .search-result").live('click', function() {
 alert('click');
});

.live () - это обработчик, который располагается на уровне документа, вместо этого фиксирует щелчки как пузырьки ... и стирается с помощью .load ()