使用 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>