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

【问题标题】：Using .each on dynamic objects in jQuery?在jQuery中的动态对象上使用.each？
【发布时间】：2013-07-01 08:34:09
【问题描述】：

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

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

那么你会怎么做$("body").on("each", ".inputs", function(){});？

【问题讨论】：

如果它们是动态的，为什么重要？
如果您能更清楚地解释情况会有所帮助，因为目前这个问题没有多大意义。
“由于动态方面”在某些时候您想更改值...什么时候？
只需在回调处理程序中执行.each。

标签： javascript jquery dynamic dynamically-generated each

【解决方案1】：

this呢：

http://jsfiddle.net/cudts0f2/

我希望动态生成的文本对每个都生效

【讨论】：

【解决方案2】：

这是完全符合 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>

【讨论】：

DOMNodeInserted 已弃用 - 请参阅 developer.mozilla.org/en-US/docs/Web/Guide/Events/…

【解决方案3】：

其实就是在 setTimout 里面运行 .each 就这么简单。

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

【讨论】：

我们几乎有完全相同的问题，并且最初正在考虑，因为 .each 找不到新插入的元素。您能否详细说明为什么 setTimeout 对动态插入的元素具有 .on 的魔力？
setTimeout 在特定时间段后运行代码。因此，如果 setTimeout 足够长以在插入元素后运行，那么它将起作用。如果它在插入元素之前运行，那么它将不起作用。在用户将与屏幕交互的情况下，最好不要像上面那样做任何事情，因为我是在加载时做的。如果你把你的函数放在另一个脚本中，然后在所有用户交互完成后运行，你应该没问题。
使用setTimeout() 只是一个技巧，而不是真正的解决方案......

【解决方案4】：

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

从 cmets 中，我发现对“每个”存在一些误解。 'Each' 不是一个事件，因此如果调用 'each' 则不会触发任何事件。如果您想跟踪添加的元素，因为您无法控制添加的时间，您需要一个计时器：

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

【讨论】：

他可以做到这一点，但是为什么$(".inputs").val("new-value");也可以工作呢？
无法重新运行怎么办？ IE。利用 body.on 的好处？
@Pointy 我认为他简化了该脚本，但实际上想将每个输入的值设置为不同的值。在 o_O，如果您能够动态添加元素，则可以再次运行该脚本。您还如何动态添加元素？这需要一些脚本吗？
是的，没错，但是.val() 也可以将函数作为参数。
@o_O .on() 的东西仅用于事件处理。如果不涉及任何事件，则无关紧要。

【解决方案5】：

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

http://jsfiddle.net/4SV7n/

每次都做不同的事情：

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

【讨论】：

当然可以。如果我可以随时调用脚本，那将很容易。不幸的是，需要 .on 的好处是我没有这种控制权。
你能做一个小提琴，尝试一下你在说什么，这样更清楚吗？我很难弄清楚你想要做什么。
这是因为你在点击时调用它如果我们需要在没有任何事件的情况下触发函数