Jquery点击事件不再显示按钮答案

【问题标题】：Jquery click event doesn't show button anymoreJquery点击事件不再显示按钮
【发布时间】：2014-10-24 08:23:59
【问题描述】：

我正在使用两个查询点击事件来动态添加和删除输入字段。这曾经完美地工作，现在突然不行了。实在找不到问题

这里是代码

<div>
        <input type="image" id="btnAdd" src="~/Images/button_add.png" />
        <input type="image" id="btnDel" src="~/Images/button_remove.png"/>
</div>

jQuery

$(document).ready(function () {
    $aantal = 0;
    $('#btnAdd').click(function () {
        var num = $('.clonedInput').length; 
        var newNum = new Number(num + 1);      

        var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);

        newElem.children(':eq(0)').children(':eq(0)').attr('id', 'check' + newNum).attr('name', 'check' + newNum).attr('checked', false).val('');
        newElem.children(':eq(0)').children(':eq(2)').attr('id', 'extra' + newNum).attr('name', 'extra' + newNum).css({ "background-color": "white" }).val('');
        newElem.children(':eq(1)').children(':eq(0)').attr('id', 'checkVerplicht' + newNum).attr('name', 'checkVerplicht' + newNum).attr('checked', false).val('');

        if (newNum <= 6) {
            $('#input' + num).after(newElem);
            $('#inputCheck' + num).after(newElemCheck);
        }

        $('#btnDel').attr('disabled', false);
        $('#btnDel').show();
    });

    $('#btnDel').click(function () {
        var num = $('.clonedInput').length; 
        var priceNum = $('.clonedInput').length;
        $('#input' + num).remove();     
        $('#inputCheck' + num).remove();

        $('#btnAdd').attr('disabled', false);

        if (num - 1 == 1) {
            $('#btnDel').attr('disabled', true);
            $('#btnDel').hide();
        }
    });

    $('#btnDel').attr('disabled', true);
    $('#btnDel').hide();

});

btnAdd 工作正常，但 btnDel 不能。当我点击添加按钮时，应该会显示删除按钮，因此添加的字段也可以删除（直到只剩下1个字段，删除按钮再次隐藏）。这曾经工作正常，我不明白为什么它不再工作了。

【问题讨论】：

我在$('#inputCheck' + num).after(newElemCheck); 行收到Uncaught ReferenceError: newElemCheck is not defined 。看看控制台。

标签： javascript jquery dynamic input

【解决方案1】：

您引用的变量“newElemCheck”未在您发布的代码中的任何位置定义。这需要存在于全局命名空间中，或者您需要在 btnAdd 点击函数中创建它（并分配您想要引用的任何内容）。

【讨论】：

谢谢，我忘了删除对“newElemCheck”的引用。

【解决方案2】：

用于：

$(document).on('click','#btnDel',function () {
        var num = $('.clonedInput').length; 
        var priceNum = $('.clonedInput').length;
        $('#input' + num).remove();     
        $('#inputCheck' + num).remove();

        $('#btnAdd').attr('disabled', false);

        if (num - 1 == 1) {
            $('#btnDel').attr('disabled', true);
            $('#btnDel').hide();
        }
    });

比使用 .on() 方法将点击事件委托给未来添加到 DOM 的元素

【讨论】：

顺便说一句，这与$('#btnDel').click(function(){..}) 相同。委派的正确语法是$(document).on('click','#btnDel',function(){})。您可以在 $(document) 的位置使用任何静态父选择器。
Mritunjay 是正确的。 .click() 函数只是 .on('click', ...) 的别名。基本上是速记，但它完全有效。