[英]How to select a dynamically generated form element in jquery / javascript using its ID?
我試圖在用戶單擊ADD按鈕/加號時動態創建一行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=""> </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;
問題:如何選擇新表單字段的動態生成ID。
這是用於選擇第一次加載頁面時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動態創建的
第一場:動物類型:
ID="species1"
第二
ID="breed1"
:品種:ID="breed1"
第三欄:數量:
ID="quantity1"
我無法使用jquery選擇器選擇動態生成的表單字段: - 例如: $("#species1").change(function(){});
,它不起作用。
我想做什么?
我需要使用其ID屬性獲取這些字段的值。 任何幫助將受到高度贊賞。 謝謝 。
將event delegation
用於動態生成的內容,如下所示:
// change `document` to top level parent that existed on page or
// parent container
$(document).on("change", "#species1", function(){...});
那是因為它們在綁定到它的變化事件時還不存在。
您可以在add_input
函數中添加事件偵聽器,或使用更抽象的事件處理程序:
$("form").on("change", ".species", function () {
var id = $(this).attr("data-id");
...
});
這將要求您刪除ID並使用class
屬性。 我的意見是哪種方式。
您可以使用$(speciesElement).attr("data-id", id)
附加ID。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.