JQuery Clone - запуск одного и того же события на обоих элементах

Если я клонирую элемент с событиями .clone(true) и добавить его на той же странице. Могу ли я вызвать одно и то же "живое" событие клика на обоих.

Например, если я создаю свое собственное меню выбора, используя элементы 'ul' и 'li', и добавляю событие 'live' click 'к его классу, например,'.selectOption '. Могу ли я изменить исходный элемент, если клонированный?

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

Я не понимаю, почему событие не внесет оба изменения. Это указывает на оба, потому что они имеют один и тот же класс и структуру.

Источник

1 ответ

Решение

Вместо того, чтобы использовать .delegate() или же .live(), вы должны попробовать использовать .on() вместо. Допустим, вы клонируете элемент с элементом имени класса, затем вы можете использовать следующий код для привязки события, например, события click:

$(document).on('click', '.item', function() {
    // Do magic here that changes things in both the original item and its cloned counterpart
});

Как .on() работает то, что он прослушивает события, чтобы всплыть дерево DOM, пока не достигнет выбранного вами интересующего элемента, и в этом случае, document, Предостережение заключается в том, что элемент, который вы слушаете при всплытии событий, должен присутствовать в DOM при выполнении jQuery, и document это самый безопасный способ сделать это. Конечно, вы также можете использовать .on() на других статических элементах, присутствующих в DOM, таких как <body>,

ОП предоставила дополнительную информацию. Похоже, что OP хочет, чтобы изменения, внесенные в один элемент, распространялись на его клонированную копию, а не просто связывали одни и те же обработчики с клонированными элементами.

$(document).ready(function () {
    var $selectMenu = $('.selectMenu');
    $selectMenu.on('click', 'li', function () {
        $(this).css('background','red');
    });

    $selectMenu.clone(true).appendTo('body');
});

В этом случае я бы выступил за использование индексов (с .index()) для трансляции DOM в контексте родителя элемента.

$(document).ready(function () {
    var $selectMenu = $('.selectMenu');
    $selectMenu.on('click', 'li', function () {
        $(".selectMenu").find('li:eq('+$(this).index()+')').css('background','red');
    });

    $selectMenu.clone(true).appendTo('body');
});

Смотрите скрипку здесь: http://jsfiddle.net/teddyrised/4Jxv2/2/

Также возможны некоторые улучшения:

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

Смотрите пересмотренную функцию ниже:

$(document).ready(function () {

    // Clone first, worry about binding events later
    $('.selectMenu').clone(true).appendTo('body');

    // Bind events
    $(document).on('click', '.selectMenu li', function() {
        $('.selectMenu')
        .find('li:eq('+$(this).index()+')')
            .addClass('highlighted');
    });

});

где класс .highlighted может использоваться для объявления цвета фона:) См. скрипку здесь: http://jsfiddle.net/teddyrised/4Jxv2/3/

Источник
Другие вопросы по тегам