事件只有一次

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); 
});