Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   .change для динамически созданных элементов (https://javascript.ru/forum/jquery/50078-change-dlya-dinamicheski-sozdannykh-ehlementov.html)

Round 10.09.2014 22:46

.change для динамически созданных элементов
 
Входные условия:

Циклом в php создается пакет элементов select c уникальными айдишниками.

<select id="select_A">
    <option value="0">0000</option>
    <option value="1">1111</option>
    ...
    <option value="n">....</option>
</select>

<select id="select_B">
    <option value="a">0000</option>
    <option value="b">1111</option>
    ...
    <option value="n">....</option>
</select>

<select id="select_C">
    <option value="A">0000</option>
    <option value="B">1111</option>
    ...
    <option value="n">....</option>
</select>


Есть скрипт, который слушает событие .change ...

вот скрипт для одно айдишника

$(document).ready(function() {
	$('#select_A').change(function() {    

	    var selectId = $('#select_A :selected').val();

		$.ajax({

		    type: "POST",
		    url: "ajax.php",
		    data: "id=" + selectId,
		    dataType: 'json',
		    success: function(data) {

				var obj = $.parseJSON(data);      

				$.each(data, function(i, item) {
				    var id = (data[i].id);
				    var name = (data[i].name);

				    $("#result_0_A").val(id + $('#result_0_A').val().replace("placeholder", data));
				    $("#result_1_A").val(name + $('#result_1_A').val().replace("placeholder", data));

				});
			}
		});	
	});
});


... по событию вставляет полученные из базы данные в созданные элементы со своими уникальными айдишниками.

Вот разметка

<div>
	<input id="result_0_A" value="" placeholder=" ">
	<input id="result_1_A" value="" placeholder=" ">
</div>

<div>
	<input id="result_0_B" value="" placeholder=" ">
	<input id="result_1_B" value="" placeholder=" ">
</div>

<div>
	<input id="result_0_C" value="" placeholder=" ">
	<input id="result_1_C" value="" placeholder=" ">
</div>



Вопрос:

как можно оптимизировать код что бы скрипт обрабатывал любое количество динамически созданных элементов?

Сейчас код работает, но слушает только один элемент и способен заполнить данными только одну пачку инпутов. Этих элементов может быть много (количество не известно).

Любые идеи и советы принимаются с благодарностью. :yes:


PS. В скрипте оставил кусок ajax что бы не пояснять откуда берутся данные и почему массив... и т.д. в общем на него можно не обращать внимания - он свою работу делает.

Aetae 10.09.2014 23:12

$(document).ready(function() {
    $('select[id^="select_"]').change(function() {   
 
        var currentId = this.id.replace('select_', ''), 
            selectId = $('#select_' + currentId + ' :selected').val();
 
        $.ajax({
 
            type: "POST",
            url: "ajax.php",
            data: "id=" + selectId,
            dataType: 'json',
            success: function(data) {
 
                var obj = $.parseJSON(data);     
 
                $.each(data, function(i, item) {
                    var id = (data[i].id);
                    var name = (data[i].name);
 
                    $("#result_0_" + currentId).val(id + $('#result_0_' + currentId).val().replace("placeholder", data));
                    $("#result_1_" + currentId).val(name + $('#result_1_' + currentId).val().replace("placeholder", data));
 
                });
            }
        });
    });
});


P.S. Гадость эта ваша Jquery. =\

Round 11.09.2014 12:35

Цитата:

Сообщение от Aetae (Сообщение 329950)
P.S. Гадость эта ваша Jquery. =\

"Гадость" - это в смысле я кривой скрипт написал? :write:
или это всё же по отношению к проблеме глобального потепления?:)

В любом случае, огромное спасибо за помощь!:victory:


Часовой пояс GMT +3, время: 17:30.