Question

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

@Configuration

新输入和原始输入具有不同宽度和新+和 - 的原因是什么呢？

提前完成。

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";
  //	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>

动态创建的元素无法正常工作

1 个答案: