Событие работает только один раз

Question

Я установил прослушиватель событий на кнопку и ожидаю добавления нового узла при каждом нажатии кнопки, но на самом деле это работает только один раз. Это должна быть моя ошибка с селектором «: последний», который каким-то образом зависает на том же узле. Как я могу это исправить? Спасибо.

$("#btnAddWord").on('click', function(){ 
    $('div.input-group:last').after(inputGroup); 
}); 

http://jsfiddle.net/aT82W/

Answer 1

Это потому, что вы пытаетесь снова и снова добавить один и тот же элемент (вместо новой). Давайте создадим новый для каждого клика.

Модифицированный код с вашего JSFiddle например:

$("#btnAddWord").on('click', function(){ 
    var inputGroup = document.createElement('div'); 
    inputGroup.setAttribute('class','input-group'); 
    inputGroup.innerHTML = '...here your HTML...'; 

    $('div.input-group:last').after(inputGroup); 
}); 

Answer 2

вы двигаетесь тот же элемент с места на место (что одно и то же место, кстати).

Вам нужно клонировать этот элемент, делая

$(inputGroup).clone()

Answer 3

Вы должны использовать функцию, которая генерирует новые входные группы, здесь вы всегда относящиеся к одному элементу (создается только один раз).

function createInputGroup() { 
    return $('<div class="input-group">' + 
      '<span class="input-group-addon">' + 
      ' <input type="checkbox">' + 
      '</span>' + 
      '<input type="text" class="form-control" placeholder="New word">' + 
      '<span class="input-group-addon">' + 
      ' <span class="glyphicon glyphicon-remove-circle"></span>' + 
      '</span>' + 
      '</div>'); 
} 

$("#btnAddWord").on('click', function(){ 
    $('div.input-group:last').after(createInputGroup()); 
}); 

Answer 4

Глядя на вашу ссылку на скрипку, кажется, что inputGroup больше не доступен при следующем нажатии. так что попробуйте это:

function CreateDiv() 
{ 
     var inputGroup = document.createElement('div'); 
     inputGroup.setAttribute('class','input-group'); 
     inputGroup.innerHTML = '<span class="input-group-addon">'+ 
         ' <input type="checkbox">'+ 
         '</span>'+ 
         '<input type="text" class="form-control" Placeholder="New word">'+ 
         '<span class="input-group-addon">'+ 
         ' <span class="glyphicon glyphicon-remove-circle"></span>'+ 
         '</span>'; 
    return inputGroup; 
} 

$(document).on("click", "#btnAddWord", function(){ 
    $('div.input-group:last').after(CreateDiv()); 
}); 

Answer 5

$("#btnAddWord").on('click', function(){ 
    var inputGroup = document.createElement('div'); 
inputGroup.setAttribute('class','input-group'); 
inputGroup.innerHTML = '<span class="input-group-addon">'+ 
         ' <input type="checkbox">'+ 
         '</span>'+ 
         '<input type="text" class="form-control" Placeholder="New word">'+ 
         '<span class="input-group-addon">'+ 
         ' <span class="glyphicon glyphicon-remove-circle"></span>'+ 
         '</span>'; 

    $('div.input-group').last().append(inputGroup); 
});