Jquery点击事件不再显示按钮

时间:2014-08-30 14:11:21

标签: javascript jquery dynamic input

我使用两个查询点击事件来动态添加和删除输入字段。这曾经完美地工作,现在突然间它没有。我真的找不到问题

这是代码

<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个字段并再次隐藏删除按钮)。以前工作正常,我无法理解它为什么不再工作。

2 个答案:

答案 0 :(得分:0)

使用于:

$(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()方法将click事件委托给添加到DOM的未来元素

答案 1 :(得分:0)

您引用的变量“newElemCheck”未在您发布的代码中的任何位置定义。这需要存在于全局命名空间中,或者您需要在btnAdd单击函数中创建它(并指定您要引用的任何内容)。