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

你应该使用一个生成新输入组的函数，这里你总是引用相同的元素（仅创建一次）。

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

活动只有一次

5 个答案: