Как использовать jquery для HTML, загруженного после document.ready ()

Question

Как использовать jquery для HTML, загруженного после document.ready ()

0

У меня есть несколько HTML-элементов, которые отображаются функцией javascript на странице:

<a href="#" class="test1">Test</a>
<a href="#" class="test2">Test</a>
<a href="#" class="test3">Test</a>

Затем у меня есть еще один javascript, который я использую для создания функции при нажатии Test:

$(document).ready(function(){

   $( ".test1" ).click(function() {
   // Code here
   });

   $( ".test2" ).click(function() {
   // Different code here
   });

   $( ".test3" ).click(function() {
   // Different code here
   });

});

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

alias51 09 нояб. 2013, в 15:09

Источник

Теги:

javascript

jquery

3 ответа

Ещё вопросы

Rory McCrossan · Answer 1 · 2013-11-09T12-28-00.000Z

Вам необходимо использовать делегированный обработчик событий:

$(document).ready(function(){
    $(document)
        .on('click', '.test1', function() {
            // Code here
        })
        .on('click', '.test2', function() {
            // Code here
        })
        .on('click', '.test3', function() {
            // Code here
        });
});

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

Если у меня есть целый набор функций, могу ли я вложить их в (документ) .on? Если так, какой будет синтаксис?
Это зависит от структуры этих функций и от того, как логика протекает между ними. Можете ли вы отредактировать свой вопрос, чтобы включить эти функции.
Просьба посмотреть обновленный вопрос
Спасибо, похоже, это не решает мою проблему. Какой лучший способ отладить это?
Так же, как и весь javascript - консоль. Нажмите F12 в вашем браузере, чтобы увидеть его.
Просто чтобы прояснить, вам все еще нужен обработчик готовых документов. Проверьте мое обновление

Mattias Åslund · Answer 2 · 2013-11-09T12-09-00.000Z

Вы можете сделать события клика "живыми", чтобы они привязывались к объектам, поскольку они были введены в dom. Просто измените.click(function() {....}); to.live('click', function() {....});

Извините за плохое форматирование. Я нахожусь на телефоне, набираю ....
Нет нет. .live() устарела. .on() этого используйте .on() .
Ох, не знал этого. Жаль. Спасибо за обновления!

Tushar Gupta · Answer 3 · 2013-11-09T11-24-00.000Z

Использовать .on()

Поскольку элементы добавляются динамически, вы не можете напрямую связывать события с ними. Поэтому вам нужно использовать Event Delegation.

$(document).on('click', '.test', function() { //code here });

Синтаксис

$( elements ).on( events, selector, data, handler );

Спасибо, зачем использовать (документ). Уже тогда вообще? Каковы преимущества / недостатки этого?