0

每次单击添加按钮时，我都编写了一个函数来添加带有文本框和删除按钮的列表项。我还通过添加一个数字为每个新元素添加一个唯一的 id。当我尝试删除一个元素然后添加另一个元素时会出现问题，有时该数字会重复。例如：我添加了 4 里并决定删除 #3。然后再次单击添加新的新序列是 1,2,4,3,4 而不是 1,2,4,5,6。我希望这是有道理的。
这是我的 javascript

var count = 2;
$('#add').click(function() {
    var newTxtBxLi = $('<li></li>').attr('id', 'newli' + count).appendTo('ul');
    var input = $('<input type="text" id="newinput' + count + '" name="newinput' + count + '" /><input type="button"  id="remove' + count + '" class="remove" value="">');

    $(input).appendTo(newTxtBxLi);

    count++;

    $('.remove').each(function() {
        $(this).click(function() {
            //count--;
            $(this).parent('li').remove();
        });
    });
});​

提前致谢

//更新所以我正在对stackoverflow进行一些研究，并找到了一篇关于执行重复ID检查的帖子。新代码有效，但现在我必须弄清楚如何编写“找到最后一个 id 和 + 1，然后用这个新 id 创建新 li。这是我更新的代码：

    $('#add').click(function() { 
var count = $('ul > li').length + 1;
        var newTxtBxLi = $('<li></li>').attr('id', 'newli' + count).appendTo('ul');
        var input = $('<input type="text" id="newinput' + count + '" name="newinput' + count + '" /><input type="button"  id="remove' + count + '" class="remove" value="">');

        $('ul > li[id]').each(function(){
            var ids = $('[id='+this.id+']');
            if(ids.length>1 && ids[0]==this){
                //console.warn('Multiple IDs #'+this.id);
                //find the last id and + 1, then add new listitem    

                }else{
                $(inputAcc).appendTo(newTxtBxLi);
                accomplishCount++;
                }

            });

        $('.remove').each(function() {
            $(this).click(function() {
                count--;
                $(this).parent('li').remove();
            });
        });
    });​
4

2 回答 2

1

每次单击时，您都不应该将click()处理程序重新分配给页面上的所有元素。.remove#add

因此，您正在向.remove元素添加多个相同的单击处理程序。

只需将其分配给您创建的新文件即可。

var count = 2;
$('#add').click(function() {
    var newTxtBxLi = $('<li></li>').attr('id', 'newli' + count).appendTo('ul');

    var input = $('<input type="text" id="newinput' + count + '" name="newinput' + count + '" /><input type="button"  id="remove' + count + '" class="remove" value="">');

    input.find('.remove').click(function() {
            //count--;
            $(this).parent('li').remove();
        });

    input.appendTo(newTxtBxLi);

    count++;
});​

作为将新的点击处理程序分配给每个.remove创建的处理程序的替代方法，您可以使用.live()or.delegate()代替。

   // Call delegate on the UL when the page loads.
   // Probably a good idea to have an ID on the UL
$('ul').delegate('.remove','click',function() {
            //count--;
            $(this).parent('li').remove();
        });

var count = 2;
$('#add').click(function() {
    var newTxtBxLi = $('<li></li>').attr('id', 'newli' + count).appendTo('ul');

    var input = $('<input type="text" id="newinput' + count + '" name="newinput' + count + '" /><input type="button"  id="remove' + count + '" class="remove" value="">');

    input.appendTo(newTxtBxLi);

    count++;
});​

或者.live()版本看起来像这样：

$('ul > li > .remove').live('click',function() {
            //count--;
            $(this).parent('li').remove();
        });
于 2010-10-07T18:43:45.393 回答
0

与其尝试跟踪手动计数，不如将计数作为li页面上元素数量的函数，怎么样？IE

$('#add').click(function(){
    count = $('li').length;
    var newTxtBxLi = $('<li></li>').attr('id', 'newli' + count).appendTo('ul');
    var input = $('<input type="text" id="newinput'+ count +'" name="newinput'+ count +'" /><input type="button"  id="remove'+ count +'" class="remove" value="">');

    $(input).appendTo(newTxtBxLi);

    $('.remove').each(function(){
        $(this).click(function(){
            $(this).parent('li').remove();
        });
    });
});

不过，我不确定您为什么希望序列变为 1、2、4、5、6，因为只需让每个序列都有一个唯一的 id 就足够了。但也许这很重要？

于 2010-10-07T18:44:27.920 回答