jquery .on click не работает с добавленными позже элементами

Question

jquery .on click не работает с добавленными позже элементами

0

У меня есть следующая проблема. Насколько мне известно, использование функции.on должно добавлять слушателей событий к выбранным элементам, даже если они могут не существовать в настоящее время. Я заменяю элементы на своей странице, и после их замены слушатели событий не привязаны к ним. Так где же я ошиблась?

Вот код, который не работает:

HTML:

<nav>
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
    </ul>
</nav>

<button>change</button>

JavaScript:

$(function() {
    $("ul li").on("click", function() {
        $(this).css({"color": "red"});
    });

    $("button").on("click", function() {
        $("ul li").css({"color": "black"});

        var html = $("nav").html();
        $("nav").html(html);
    });
});

скрипка: http://jsfiddle.net/Q48db/

Matúš Dúbrava 18 март 2014, в 05:37

Источник

0

возможное дублирование событий Bind для динамически добавляемых элементов
Patrick Evans 18 март 2014, в 04:39

Теги:

javascript

jquery

html

css

4 ответа

1

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

Делегирование событий позволяет нам присоединить одного прослушивателя событий к родительскому элементу, который будет срабатывать для всех дочерних элементов, соответствующих селектору, независимо от того, существуют ли эти дети сейчас или добавлены в будущем.

$(function () {
    $("nav").on("click", 'li', function () {
        $(this).css({
            "color": "red"
        });
    });

    $("button").on("click", function () {
        $("ul li").css({
            "color": "black"
        });
        var html = $("nav").html();
        $("nav").html(html);
    });
});

Обновленный скрипт

Felix 18 март 2014, в 02:37

0

Использовать метод делегирования событий:

$(function() {
    $("ul li").on("click", function() {
        $(this).css({"color": "red"});
    });

    $("document").on("click","button", function() {
        $("ul li").css({"color": "black"});

        var html = $("nav").html();
        $("nav").html(html);
    });
});

Пример для понимания делегирования событий:

// attach a directly bound event
$( "#list a" ).on( "click", function( event ) {
event.preventDefault();
console.log( $( this ).text() );
});

// attach a delegated event
$( "#list" ).on( "click", "a", function( event ) {
event.preventDefault();
console.log( $( this ).text() );
});

Bhojendra Rauniyar 18 март 2014, в 02:37

0

Вам нужно делегировать.

$("nav").on("click",'ul li', function() {
    $(this).css({"color": "red"});
});

$("button").on("click", function() {
    $("ul li").css({"color": "black"});

    var html = $("nav").html();
    $("nav").html(html);
});

демонстрационная скрипка

Awlad Liton 18 март 2014, в 02:35

Ещё вопросы

возможное дублирование событий Bind для динамически добавляемых элементов

Arun P Johny · Accepted Answer · 2014-03-18T03-11-00.000Z

Просто использование .on() не сделает обработчик событий для работы с динамическими элементами, вам нужно использовать формат делегирования событий on()

Формат делегирования событий

$(static-ancestor).on(event, dynamic-element-selector, handler)

Так

$("nav").on("click", 'li', function () {
    $(this).css({
        "color": "red"
    });
});

Демо: скрипка

В вашем случае nav элемент является статическим элементом, потому что вы меняете его содержание, так что вы можете связать обработчик к нему и так как вы хотите иметь обработчик щелчка для li элементов передать li как селектор динамического элемента

@ MatúšDúbrava посмотреть обновление ... это должен был быть $('nav').on(...) On $('nav').on(...)