использование jQuery для добавления и удаления текстовых полей с уникальными идентификаторами - PullRequest
Новая
       27

использование jQuery для добавления и удаления текстовых полей с уникальными идентификаторами

0 голосов
/ 07 октября 2010

Я написал функцию добавления списка с текстовым полем и кнопкой удаления, каждый раз, когда нажимали кнопку добавления. Я также добавляю уникальный идентификатор к каждому новому элементу, добавляя номер. проблема возникает, когда я пытаюсь удалить элемент, а затем добавить еще один, иногда этот номер дублируется. пример: я добавляю 4 li и решаю удалить # 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 и нашел сообщение о выполнении проверки на наличие дублированных идентификаторов. новый код работает, но теперь я должен выяснить, как написать «найти последний идентификатор и + 1, а затем создать новый 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();
            });
        });
    });​

Ответы [ 2 ]

1 голос
/ 07 октября 2010

Не следует повторно назначать обработчик 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() или .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();
        });
0 голосов
/ 07 октября 2010

А что вместо того, чтобы пытаться отслеживать ручной подсчет, вместо этого вы сделали функцию подсчета количества li элементов на вашей странице? т.е. 

$('#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, хотя достаточно просто иметь каждый из них с уникальным идентификатором. Но, возможно, это было важно?

...