Javascript 事件只工作一次

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

$("#btnAddWord").on('click', function(){
    $('div.input-group:last').after( inputGroup );
});

---

这是因为您一次又一次地尝试添加相同的元素（而不是新的元素）。让我们为每次单击创建一个新的

修改了JSFIDLE示例中的代码：

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

---

这是因为您一次又一次地尝试添加相同的元素（而不是新的元素）。让我们为每次单击创建一个新的

修改了JSFIDLE示例中的代码：

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

---

您只是将同一元素从一个地方移动到另一个地方（顺便说一下，这是同一个地方）

您需要通过执行以下操作来克隆此元素

---

$（inputGroup）.clone（）

您只是将同一元素从一个地方移动到另一个地方（顺便说一下，这是同一个地方）

您需要通过执行以下操作来克隆此元素

---

$（inputGroup）.clone（）

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

函数createInputGroup（）{
返回$（''）+
'' +
'  ' +
'' +
'' +
'' +
'  ' +
'' +
'');
}
$（“#btnAddWord”）。在（'click'，function（）上{
$（'div.input-group:last'）。在（createInputGroup（）之后；
});

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

函数createInputGroup（）{
返回$（''）+
'' +
'  ' +
'' +
'' +
'' +
'  ' +
'' +
'');
}
$（“#btnAddWord”）。在（'click'，function（）上{
$（'div.input-group:last'）。在（createInputGroup（）之后；
});

查看您的小提琴链接，下一次单击时，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() );
});

函数CreateDiv（）
{
var inputGroup=document.createElement（'div'）；
setAttribute（'class'，'input-group'）；
inputGroup.innerHTML=“”+
'  '+
''+
''+
''+
'  '+
'';
返回输入组；
}
$（文档）。在（“单击”上，“#btnAddWord”，function（）{
$（'div.input-group:last'）。在（CreateDiv（）之后；
});

查看您的小提琴链接，下一次单击时，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() );
});

函数CreateDiv（）
{
var inputGroup=document.createElement（'div'）；
setAttribute（'class'，'input-group'）；
inputGroup.innerHTML=“”+
'  '+
''+
''+
''+
'  '+
'';
返回输入组；
}
$（文档）。在（“单击”上，“#btnAddWord”，function（）{
$（'div.input-group:last'）。在（CreateDiv（）之后；
});
$（“#btnAddWord”）。在（'click'，function（）上{
var inputGroup=document.createElement（'div'）；
setAttribute（'class'，'input-group'）；
inputGroup.innerHTML=“”+
'  '+
''+
''+
''+
'  '+
'';
$（'div.input-group'）.last（）.append（inputGroup）；
});
$（“#btnAddWord”）。在（'click'，function（）上{
var inputGroup=document.createElement（'div'）；
setAttribute（'class'，'input-group'）；
inputGroup.innerHTML=“”+
'  '+
''+
''+
''+
'  '+
'';
$（'div.input-group'）.last（）.append（inputGroup）；
});