动态创建的元素不起作用

Question

我有一个简单的代码，其中有一个用户可以使用+和 - 图标添加和删除的输入字段。但它只是第一次工作，新创建的图标不起作用。

Here is the fiddle

$(".glyphicon-plus").on('click',function(){ 
    var Class = $(this).attr('class'); 
    var $parent = $(this).parent(); 

    var div = document.createElement('div'); 

    var input = document.createElement('input'); 
    input.type = "text"; 
    input.className = Class; 

    var iconp = document.createElement('i'); 
    iconp.className = "glyphicon glyphicon-plus"; 
    // iconp.className = "glyphicon-plus" 

    var iconr = document.createElement('i'); 
    iconr.className = "glyphicon glyphicon-minus"; 
    // iconr.className = "glyphicon-remove"; 

    div.appendChild(input); 
    div.appendChild(iconp); 
    div.appendChild(iconr); 

    $(div).insertAfter($parent); 
}) 

的是什么样的新的输入和原始输入有不同的宽度和新+，究其原因 - 更接近呢？

Thanx提前。

Answer 1

Updated fiddle。

您对使用事件代表团on()应对加入动态DOM中的新元素：

$("body").on('click',".glyphicon-plus",function(){ 
    //Your code here 
}); 

注：你也应该删除如下因素线：

input.className = Class; 

因为它给一个glyphicon-plus类输入字段，所以它也可以点击。

希望这会有所帮助。

$("body").on('click',".glyphicon-plus",function(){ 
 
    var Class = $(this).attr('class'); 
 
    var $parent = $(this).parent(); 
 
    var div = document.createElement('div'); 
 
    var input = document.createElement('input'); 
 
    
 
    input.type = "text"; 
 

 
    var iconp = document.createElement('i'); 
 
    iconp.className = "glyphicon glyphicon-plus"; 
 
    // \t iconp.className = "glyphicon-plus" 
 

 
    var iconr = document.createElement('i'); 
 
    iconr.className = "glyphicon glyphicon-minus"; 
 
    // \t iconr.className = "glyphicon-remove"; 
 

 
    div.appendChild(input); 
 
    div.appendChild(iconp); 
 
    div.appendChild(iconr); 
 

 
    $(div).insertAfter($parent); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div> 
 
    <input type = "text" class = "arrays" /> 
 
    <i class = "glyphicon glyphicon-plus"></i> 
 
    <i class = "glyphicon glyphicon-minus"></i> 
 
</div>