使用 jquery 向动态表单元素动态添加功能
Dynamically add function to dynamic form elements using jquery
我使用 jquery 创建了一个包含动态表单元素的网页。现在我想将相同的功能应用于动态添加的元素。怎么做?
检查这个:https://jsfiddle.net/tz5w6fu4/1/
在这里您可以看到,在更改第一个文本输入字段的文本后,会有一个新选项将被添加到它旁边的 select 元素中,然后单击/更改 select 元素,文本输入将在其旁边的文本输入字段中更改。这对于第一个元素来说是正常发生的..
现在如何向动态添加的表单元素添加相同的功能?
您不能对多个元素使用 same id,而是将它们更改为 类 。然后,使用 .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>
我使用 jquery 创建了一个包含动态表单元素的网页。现在我想将相同的功能应用于动态添加的元素。怎么做?
检查这个:https://jsfiddle.net/tz5w6fu4/1/
在这里您可以看到,在更改第一个文本输入字段的文本后,会有一个新选项将被添加到它旁边的 select 元素中,然后单击/更改 select 元素,文本输入将在其旁边的文本输入字段中更改。这对于第一个元素来说是正常发生的..
现在如何向动态添加的表单元素添加相同的功能?
您不能对多个元素使用 same id,而是将它们更改为 类 。然后,使用 .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>