简单的jQuery函数在创建后不会对输入元素起作用

Question

当我单击一个按钮时，我在隐藏的div中创建了一些输入元素。这个div显示出这些元素。

＆＃13;

＆＃13;

<div id="copiasdoc" style="display:none;"></div>
<button type="button" id="appear">click</button>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
  var copies = "";
  $("#appear").click(function() {
    copies+='<input type="text" class="form-control ccert" style="width:80px;display:inline-block;"><input type="text" class="form-control ccert" style="width:80px;display:inline-block;"><input type="text" class="form-control ccert" style="width:80px;display:inline-block;">';
    $("#copiasdoc").show();
    document.getElementById('copiasdoc').innerHTML += copies;
  });
  $("#copiasdoc .ccert").keyup(function () {
    alert("Hello");
  });
</script>

＆＃13;

＆＃13;

＆＃13;

我希望在输入时获得这些值的总和，但这并不起作用。我更改了代码以创建一个简单的任务（上图），比如在任何元素中显示一个警报，但这仍然无效。

我想要一些帮助。

Answer 1

简短回答

$("#copiasdoc .ccert").keyup(function () {
    alert("Hello");
});

应该是：

$("#copiasdoc").on('keyup','.ccert',function () {
    alert("Hello");
}));

说明

.on jQuery函数绑定在DOMReady事件被触发后创建的元素上的事件。

事先，您新创建的元素不会将事件绑定到它们。使用.on，如果您将事件处理程序特定地绑定到静态父级（在本例中为#copiasdoc），则会执行此操作。 https://eval.in/841224

工作示例

 		var copies = "";
 		$("#appear").click(function(){
 			copies+='<input type="text" class="form-control ccert" style="width:80px;display:inline-block;"><input type="text" class="form-control ccert" style="width:80px;display:inline-block;"><input type="text" class="form-control ccert" style="width:80px;display:inline-block;">';
 			$("#copiasdoc").show();
 			document.getElementById('copiasdoc').innerHTML += copies;
 		});

 		$("#copiasdoc").on('keyup','.ccert',(function () {
 			alert("Hello");
 		}));

<div id="copiasdoc" style="display:none;"></div>
 	<button type="button" id="appear">click</button>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>

Answer 2

您当前的事件处理程序绑定到一组静态元素（第一次运行时存在的元素）。如果希望处理程序应用于动态创建的元素，则应使用事件委派：

$("#copiasdoc").on('keyup', '.ccert', function () {
    alert("Hello");
});

Answer 3

由于您要动态添加元素，因此需要使用事件委派，您可以使用$(document).on('keyup', "#copiasdoc .ccert", function () {})，如下所示：

<div id="copiasdoc" style="display:none;"></div>
 	<button type="button" id="appear">click</button>



<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
 	<script>
 		var copies = "";
 		$("#appear").click(function(){
 			copies+='<input type="text" class="form-control ccert" style="width:80px;display:inline-block;"><input type="text" class="form-control ccert" style="width:80px;display:inline-block;"><input type="text" class="form-control ccert" style="width:80px;display:inline-block;">';
 			$("#copiasdoc").show();
 			document.getElementById('copiasdoc').innerHTML += copies;
 		});

 		$(document).on('keyup', "#copiasdoc .ccert", function () {
 			alert("Hello");
 		});
 	</script>