活動僅進行一次

Question

我將事件偵聽器設置為button，並期望每次按下按鈕時都會添加新節點，但是實際上，這僅一次起作用。 那一定是我的錯誤：“：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

您應該使用一個生成新輸入組的函數，在這里，您始終指的是同一元素（僅創建一次）。

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 3

查看您的小提琴鏈接，看來下次單擊時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 4

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

Answer 5

您只是將同一元素從一個地方移到另一個地方（順便說一下，這是同一地方）。

您需要通過執行以下操作來克隆此元素

$(inputGroup).clone()