Невозможно заставить jQuery on () регистрировать динамически добавляемый контент - PullRequest
Новая
       22

Невозможно заставить jQuery on () регистрировать динамически добавляемый контент

5 голосов
/ 14 марта 2012

Я совершенно новичок в методе on () в jQuery, но пришло время для его использования.

У меня есть две функции для нажатия на определенные кнопки.Каждая функция работает с любыми элементами, изначально находящимися на странице, но не с любым динамически добавляемым содержимым (больше тех же кнопок).Я понимаю, что мне нужно использовать функцию on () после прочтения других ответов здесь и в Google, но у меня все еще проблемы.Во всяком случае, код: 

jQuery("ul#THEBUTTONS").on({
    click: function(event){
        event.preventDefault();
        console.log("apaz clicked");
    }
}, "a.azaz");


jQuery("ul#THEBUTTONS").on({
    click: function(event){
        event.preventDefault();
        console.log("mapaz clicked");
    }
}, "a.mapaz");

Любая помощь будет очень ценна, рвать на себе волосы здесь.

Ответы [ 2 ]

8 голосов
/ 14 марта 2012

.on() по существу имеет два вида: один, который действует как .bind(), и другой, который действует как .delegate().

Для вашей проблемы вы хотите использовать версию delegate. Для справки, on подписи выглядят так: 

// bind
$(element-selector).on(event, handler)

// delegate
$(container-selector).on(event, element-selector, handler)

Лучший способ освоиться с этим - это, вероятно, прочитать delegate, что это такое, как его использовать, а затем применить это к on.

1 голос
/ 14 марта 2012

Существует два способа использования .on(), и вы используете неправильный тип.

Вы можете привязать обработчики событий непосредственно к элементам, используя $('selector for elements you want the event handler bound to').on('event', function() {...});

Или вы можете делегировать события, вызывая .on() для элемента-оболочки, который будет содержать все динамически добавленные элементы, такие как div или, в худшем случае, элемент <body>. Код будет выглядеть примерно так: 

<div id="wrapper">
    <a href="#" class="link">Test link</a>
</div>

$('#wrapper').on('click', '.link', function(e) {
    // code to handle the click event on the link here
});

Обработчик события фактически обрабатывается элементом <div id="wrapper"> после того, как событие всплыло до него, но функция вызывается только в том случае, если исходная цель соответствует предоставленному селектору. С помощью этого метода вы можете динамически добавлять дополнительные элементы с классом link в div, и функция также будет запускаться при нажатии на них.

...