使用 jquery 将函数动态添加到动态表单元素

Question

我使用 jquery 创建了一个带有动态表单元素的网页。 现在我想对动态添加的元素应用相同的功能。 怎么做？

检查这个： https : //jsfiddle.net/tz5w6fu4/1/

在这里您可以看到，在更改第一个文本输入字段的文本时，将有一个新选项添加​​到它旁边的选择元素中，然后在单击/更改选择元素的选项时，文本输入将更改为旁边的文本输入字段。 这通常发生在第一个元素上。

现在如何向动态添加的表单元素添加相同的功能？

Answer 1

您不能对多个元素使用相同的id 而是将它们更改为 classes 。 然后，使用.find()和closest()获取所需元素的引用并更改那里的值。

演示代码：

 $(document).on('change', '.abc', function() { var get_Select_reference = $(this).closest(".inputFormRow") //get closet div.. get_Select_reference.find(".xyz").empty() //empty your select-box get_Select_reference.find(".def").val("") //empty input if ($(this).val() != "") { get_Select_reference.find(".xyz").append(new Option("Demo", "demo")); get_Select_reference.find(".xyz").append(new Option("Demo1", "demo1")); //append options.. } }); $(document).on('change', '.xyz', function() { var get_input_reference = $(this).closest(".inputFormRow").find(".def") //get input.. var val = $(this).val(); //your select-box value get_input_reference.val(val); }); // add row $("#addRow").click(function() { var html = ''; //added classes.. html += '<div class="inputFormRow">'; html += '<div class="input-group mb-3">'; html += '<input type="text" name="title[]" class="form-control m-input abc" placeholder="Enter title" autocomplete="off">'; html += '<select name="ch[]" class="xyz">'; html += '</select>'; html += '<input type="text" name="name[]" class="form-control m-inpu t def">'; html += '<div class="input-group-append">'; html += '<button type="button" class="btn btn-danger removeRow">Remove</button>'; html += '</div>'; html += '</div>'; $('#newRow').append(html); }); //use class here as well $(document).on('click', '.removeRow', function() { $(this).closest('.inputFormRow').remove(); });

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <div class="container" style="max-width: 700px;"> <form method="post" action=""> <div class="row"> <div class="col-lg-12"> <!--added class--> <div class="inputFormRow"> <div class="input-group mb-3"> <input type="text" name="title[]" class="form-control m-input abc" id="abc" placeholder="Enter title" autocomplete="off"> <select name="ch[]" class="xyz" id="xyz"> </select> <input type="text" name="name[]" class="form-control m-input def" id="def"> <div class="input-group-append"> <button id="removeRow" type="button" class="btn btn-danger removeRow">Remove</button> </div> </div> </div> <div id="newRow"></div> <button id="addRow" type="button" class="btn btn-info">Add Row</button> </div> </div> </form> </div>