Question

我试图在用户点击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="">&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;

问题：如何选择动态生成的新表单字段的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="quantity1"

我无法使用jquery选择器选择动态生成的表单字段： - 例如：$("#species1").change(function(){});，它不起作用。

我想做什么？

我需要使用其ID属性获取这些字段的值。任何帮助将受到高度赞赏。谢谢。

Answer 1

将event delegation用于动态生成的内容，如下所示：

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

Answer 2

那是因为它们在绑定到它的更改事件时还不存在。

您可以在add_input函数中添加事件侦听器，或使用更抽象的事件处理程序：

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

这将要求您删除ID并使用class属性。我的观点是哪种方式。

您可以使用$(speciesElement).attr("data-id", id)附加ID。

如何使用其ID在jquery / javascript中选择动态生成的表单元素？

2 个答案: