С помощью.каждый на динамических объектах в jQuery?

есть много вопросов, которые вроде бы спрашивал, но в конце концов все они хотят присоединить .щелкните события и нет .каждый и так общепринятый ответ во всех них включает $("body").on("click", ".selector", function(){}); и это определенно не то, что я хочу.

у меня есть некоторые сгенерированные входы, и мне нужно изменить значение каждого из них одновременно. Обычно я $(".inputs").each(function(){$(this).val("new-value")}; или что-то в этом роде, однако, я не могу из-за динамического аспекта.

Итак, как бы вы сделали а $("body").on("each", ".inputs", function(){});?

28
dynamic dynamically-generated each javascript jquery

4 ответов

на самом деле, это так просто работает .каждый внутри setTimout.

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

$.each работает с любыми новыми элементами.

http://jsfiddle.net/4SV7n/

делать что-то другое каждый раз:

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

2

можно использовать $(".inputs").each(function(){$(this).val("new-value")}; отлично подходит для динамических элементов. Вам просто нужно перезапустить скрипт после динамического добавления элемента.

из комментариев я понял, что существует некоторое недопонимание относительно "каждого". "Каждый" не является событием, и поэтому никакое событие не запускается, если вызывается "каждый". Если вы хотите отслеживать добавленные элементы, потому что у вас нет контроля над их добавлением, вам понадобится таймер:

setInterval(function(){ $(".inputs").each(function(){$(this).val("new-value")}; },500);
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>
0