在jQuery中的动态对象上使用.each

Using .each on dynamic objects in jQuery?

本文关键字:each 对象 动态 jQuery      更新时间:2023-09-26

有很多问题似乎在问这个问题,但最终他们想要的只是附加.click事件,而不是每个事件,所以所有这些事件中普遍接受的答案都包括$("body").on("click", ".selector", function(){});,这绝对不是我想要的。

我有一些生成的输入,我需要同时更改每个输入的值。通常我会$(".inputs").each(function(){$(this).val("new-value")};或类似的东西,但是,由于动态方面的原因,我不能。

那么你会如何做$("body").on("each", ".inputs", function(){});呢?

实际上,它就像运行setTimout内部的.each一样简单。

setTimeout(function(){
  $(".inputs").each(function(){$(this).val("new-value")});
}, 5000);

$.each适用于添加的任何新元素。

http://jsfiddle.net/4SV7n/

每次都做一些不同的事情:

http://jsfiddle.net/4SV7n/1/

这里有一个更好的脚本,它完全按照OP的要求执行。

function doWithInput(i, e){
	$(e).val("done with each");
}
$(document).ready(function(){
    $("#button").click(function(){
       $("#inputs").append("<input class='inputs_new' type='text' /><br />");
    });
  	$(".inputs").each(doWithInput);
});
$(document).on("DOMNodeInserted", ".inputs_new", function(e) {
	$(e.target).removeClass('inputs_new').addClass('inputs');
  doWithInput(0, e.target);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inputs">
    <input class="inputs" type="text" placeholder='type in me' /><br />
</div>
<button type="button" id="button">Add</button>

您可以在动态元素上完美地使用$(".inputs").each(function(){$(this).val("new-value")};。您只需要在动态添加元素后重新运行脚本。

从评论中,我发现对"每一个"都存在一些误解Each不是一个事件,因此如果调用了Each,则不会触发任何事件。如果你想跟踪添加的元素,因为你无法控制它们的添加时间,你需要一个计时器:

setInterval(function(){ $(".inputs").each(function(){$(this).val("new-value")}; },500);

this:怎么样

http://jsfiddle.net/cudts0f2/

我希望动态生成的文本在每个上生效