事件只有一次

Question

我将事件监听器设置为按钮，并期望每次按下按钮时添加新节点，但事实上，这只能工作一次。这肯定是我的错误：“last”选择器会以某种方式冻结在同一个节点上。我怎样才能解决这个问题？谢谢。

$("#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); 
});