Question

我遇到了代码中的错误。我正在克隆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);

我提供了一个删除按钮来删除行，我使用按钮的类名来执行单击时的功能。

        $(".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函数？

Answer 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＆gt; = 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)

克隆元素和事件

Answer 2

因为使用clone时的默认设置是不克隆事件。尝试将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）

Answer 3

绑定click事件时，只存在一个div，因此它是唯一一个具有click处理程序的div。您应该更改要使用的代码而不是单击。

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

Answer 4

尝试继续.on（＆＃39;点击＆＃39;，功能（e）{...}）;或使用live（）选择器（但我认为直播已被弃用......）

所以在你的情况下

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

jQuery .click（）不执行克隆元素

4 个答案: