Как выбрать динамически генерируемый элемент формы в jquery / javascript, используя его идентификатор?



Я пытаюсь создать строку из 3 полей формы динамически, когда пользователь нажимает на кнопку Добавить / символ плюс .



Введите описание изображения здесь



Ниже приведен код Javascript, используемый для создания элементов формы:



<script type="text/javascript">
var field_counter = 1;
var field_limit = 5;
species = document.getElementById('species');
breed = document.getElementById('breed');


function addInput(divName){

if (field_counter == field_limit) {
alert("You have reached the limit of adding " + field_counter + " inputs");
}
else {

var dynamic_species = 'species'+field_counter; //dynamic id for species
var dynamic_breed = 'breed'+field_counter; //dynamic id for breed
var dynamic_quantity = 'quantity'+field_counter; //dynammic id for quantity
var dynamicForm = '<div class="form-group"><div class="col-md-4"><label for="'+dynamic_species+'">Animal Type</label><select class="form-control input-sm '+dynamic_species+'" id="'+dynamic_species+'"><option></option></select></div>';
dynamicForm+='<div class="form-group"><div class="col-md-4"><label for="'+dynamic_breed+'">Breed</label><select class="form-control input-sm '+dynamic_breed+'" id="'+dynamic_breed+'"><option></option></select></div>';
dynamicForm+='<div class="form-group"><div class="col-md-2"><label for="'+dynamic_quantity+'">Quantity</label><input type="number" name="quantity_export" id="'+dynamic_quantity+'" class="form-control input-sm '+dynamic_quantity+'" /></div>';
var newdiv = document.createElement('div');
newdiv.innerHTML = dynamicForm;
document.getElementById(divName).appendChild(newdiv);
document.getElementById(dynamic_species).innerHTML = species.innerHTML;
document.getElementById(dynamic_breed).innerHTML = breed.innerHTML;
field_counter++;

}
}
</script>
<div class="col-md-2" >
<label for="">&nbsp;</label>
<i onclick="addInput('dynamicInput');" style="cursor: pointer; border: none;" class="fa fa-plus form-control input-sm">Add</i>

</div>


Используя приведенный выше код, я создаю поля формы "тип животного , порода и количество", все вместе в ряд, как показано на рисунке . Максимальное количество строк, которые могут быть добавлены, ограничено значением переменной "field_limit".



Значения выпадающих списков первоначально заполняются из родительского выпадающего списка с помощью кода:



species = document.getElementById('species');
breed = document.getElementById('breed');
document.getElementById(dynamic_species).innerHTML = species.innerHTML;
document.getElementById(dynamic_breed).innerHTML = breed.innerHTML;


Вопрос: Как я могу выбрать динамически генерируемый идентификатор новых полей формы .



Введите описание изображения здесь



Вот скрипт, который я использую для выбора первой строки полей формы, которая находится в HTML, когда страница загружается в первый раз:



$("#species").change(function(){
$('#breed').empty();
//alert($(this).val());
var param = {'id':$(this).val()};
$.ajax({
type : 'POST',
url : '<?php echo base_url();?>select_breed',
dataType : 'json',
data: param,
success : function(data)
{
var select = $('#breed');
select.empty().append(data);
},
error : function(XMLHttpRequest, textStatus, errorThrown)
{
alert(XMLHttpRequest.responseText);

}
});

});


Вторая строка полей формы создается динамически со следующими параметрами: ID'S




Первое Поле: Тип Животного: ID="species1"



Второе Поле: Порода: ID="breed1"



Третье Поле: Количество: ID="quantity1"




Я не могу выбрать динамически генерируемые поля формы с помощью селектора jquery: - например: $("#species1").change(function(){});, он не работает .



Что я пытаюсь сделать ?



Мне нужно получить значение этих полей, используя его атрибут ID. Любая помощь будет высоко оценена . Спасибо.

525   2  

2 ответов:

Использование event delegation для динамического генерируемого контента, например:

// change `document` to top level parent that existed on page or
// parent container
$(document).on("change", "#species1", function(){...});

Это потому, что они еще не существуют при привязке к событию it's change.

Можно добавить прослушиватель событий в функцию add_input или использовать более абстрактный обработчик событий:

$("form").on("change", ".species", function () {
    var id = $(this).attr("data-id");
    ...
});

Для этого потребуется удалить идентификатор и использовать вместо него атрибуты class. Именно так, по моему мнению, и следует поступать.

Вы можете прикрепить идентификатор, используя $(speciesElement).attr("data-id", id).

Comments

    Ничего не найдено.