jQuery .click() 不为克隆元素执行答案

【问题标题】：jQuery .click() Not Executing for Cloned ElementjQuery .click() 不为克隆元素执行
【发布时间】：2014-03-14 16:09:45
【问题描述】：

我的代码遇到了错误。我正在克隆一个 div，以便用户可以添加多个客户。

            var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
            var newNum = new Number(num + 1);   // the numeric ID of the new input field being added
            var newElem = $('#divInput' + num).clone().attr('id', 'divInput' + newNum); // create the new element via clone(), and manipulate it's ID using newNum value

            // clear input value for cloned items and do not remove text for del button.
            newElem.find('input:not(.DeleteBtn),textarea').val('');
            //newElem.find('input[type="submit"]

            // Replace clone num with incremental num.
            newElem.find(':input').each(function () {
                $(this).attr('id', $(this).attr('id').replace(/\d+/, newNum));
                $(this).attr('name', $(this).attr('name').replace(/\d+/, newNum));
            });

            // insert the new element after the last "duplicatable" input field
            $('#divInput' + num).after(newElem);

我提供了一个删除按钮来删除行，并且我正在使用按钮的类名来执行 click 函数。

        $(".DeleteBtn").click(function () {
            alert(".DeleteBtn Click Function -  " + $(this).attr('id'));
            var DelBtnNum = $(this).attr('id');
            DelBtnNum = DelBtnNum[DelBtnNum.length - 1];
            $('#divInput' + DelBtnNum).remove();

        });

我可以删除第一个（原始）输入行，但不会删除任何其他客户行。

我有一个运行的代码演示，位于：http://jsfiddle.net/crjunk/FB4BZ/2/

为什么克隆的项目不会触发 .DeleteBtn.click 函数？

【问题讨论】：

您是否尝试过：.clone(true) 符合 DOC 中的建议？ jsfiddle.net/FB4BZ/3

标签： javascript jquery html

【解决方案1】：

您需要使用事件委托来支持动态元素。

既然你在小提琴中使用过 jQuery 1.6

$(document).delegate(".DeleteBtn", 'click', function () {
    alert(".DeleteBtn Click Function -  " + $(this).attr('id'));
    var DelBtnNum = $(this).attr('id');
    DelBtnNum = DelBtnNum[DelBtnNum.length - 1];
    $('#divInput' + DelBtnNum).remove();

});

如果 jQuery >= 1.7

$(document).on('click', ".DeleteBtn", function () {
    alert(".DeleteBtn Click Function -  " + $(this).attr('id'));
    var DelBtnNum = $(this).attr('id');
    DelBtnNum = DelBtnNum[DelBtnNum.length - 1];
    $('#divInput' + DelBtnNum).remove();

});

另一种选择是使用clone(true) 将元素与事件一起克隆

【讨论】：

这解决了我的问题。感谢您也为 jQuery 1.7 提供解决方案。

【解决方案2】：

因为使用克隆时的默认设置是不克隆事件。尝试将true 传递给clone()：

var newElem = $('#divInput' + num).clone(true).attr('id', 'divInput' + newNum); // create the new element via clone(), and manipulate it's ID using newNum value

jsFiddle example

作为.clone() docs 状态：

.clone( [withDataAndEvents ] ) withDataAndEvents (默认: false)

【讨论】：

这似乎是正确的答案，委托处理程序在使用 clone() 时是不必要的，因为它也可以克隆事件和数据。
完美的一个..这既简单又完美
这确实是正确的答案，也是迄今为止最优雅的

【解决方案3】：

当你绑定click事件时，只有一个div存在，所以它是唯一一个有click handler的。您应该更改代码以使用 on 而不是 click。

$(document).on('click', ".DeleteBtn", function () {

【讨论】：

这会有同样的问题，你需要委托给更高的元素
小提琴中的jQuery 1.6.4
@Jamiec 你是对的。当我需要委托时，我总是弄乱 on 的语法。编辑以使代码正确。

【解决方案4】：

尝试继续使用 .on('click',function(e){ ... });或使用 live() 选择器（但我认为 live 已被弃用......）

在你的情况下

$(".DeleteBtn").on('click',function () { ..

【讨论】：