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

【问题标题】：JQuery Clone - Triggering the same event on both elementsJQuery Clone - 在两个元素上触发相同的事件
【发布时间】：2014-05-09 12:13:22
【问题描述】：

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

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

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

我不明白为什么该事件不会使两者都发生变化。它指向两者，因为它们具有相同的类和结构。

【问题讨论】：

如果你能挖掘一些代码，那将是非常有帮助的......没有它很难说有什么问题。
你 .clone(true) 了吗？
jquery 的delegated events（参见“直接和委托事件”部分）满足您的需求。将您的事件处理程序附加到原始节点及其每个潜在克隆的任何共同祖先。在调用.on 时选择一个合适的选择器来覆盖这些克隆。请注意，.live 自 v1.7 起已弃用，并已在 1.9 中删除。
我不认为delegate 能做到这一点，因为live 基本上是一样的。我会尝试挖掘一些代码。是的，dschazam，我做到了。

标签： javascript jquery html clone

【解决方案1】：

您应该尝试使用.on()，而不是使用.delegate() 或.live()。假设你正在克隆一个类名为 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/

【讨论】：

我做了，你的问题是什么？
嘿，我用过'on'。这稍微改进了功能。如果我从克隆的选项中选择一个新选项，它将进行原始更改。但是，它不会使两者都发生变化。只有当我使用 .clone() 并且不传入 true 时，它才会这样做。
@Terry 问题不在于使用或直播！众所周知，从 jQuery 1.7 开始，不推荐使用 .live() 方法，问题是在克隆元素上触发多个操作，所以不，这不是正确的答案，我会回答这个问题并分享我的代码，如果有的话是有问题的代码。
jsfiddle.net/4Jxv2/1 看看这个简单的例子。当单击克隆“li”时，我希望原始“li”变为红色。我希望两者都能在单击时触发。
@Paddy 谢谢！我刚刚更新了我的答案。你也可以在这里看到固定的小提琴：jsfiddle.net/teddyrised/4Jxv2/2