javascript - 来自动态创建的元素的操作不起作用

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);
})

新的输入和原始输入有不同的宽度和新的 + 和 - 现在更接近的原因是什么？

提前致谢。

Answer 1

Updated fiddle .

你必须使用事件委托(delegate) 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";
  //	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);
})

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