Question

如果我使用事件.clone(true)克隆元素并将其附加到同一页面中。我可以在两者上触发相同的“实时”点击事件。

例如，如果我使用'ul'和'li'元素构建我自己的选择菜单，并在其上添加'实时'点击'事件，例如'.selectOption'。克隆的元素可以改变原始元素吗？

我没有真正的代码示例，但我之前遇到过这个问题。如果您选择其中一个选项，原始文件将保持不变。我试图触发原始的点击，但这也不起作用。

我不明白为什么这个事件不会同时改变。它指向两者，因为它们具有相同的类和结构。

Answer 1

您应该尝试使用.delegate()，而不是使用.live()或.on()。假设您正在使用类名 item 克隆元素，那么您可以使用以下代码绑定事件，例如点击事件：

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

.on()如何工作是它侦听事件以冒泡DOM树，直到它到达您选择的感兴趣元素，在这种情况下，document。需要注意的是，在执行jQuery时，您正在侦听事件冒泡的元素必须存在于DOM中，而document是最安全的方法。当然，您也可以对DOM中存在的其他静态元素使用.on()，例如<body>。

OP提供了更多信息。看来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/

JQuery Clone - 在两个元素上触发相同的事件

1 个答案: