活动仅进行一次

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()