Jquery:只查找最接近的匹配元素

Question

我正在使用下面的代码动态添加表单字段

$(document).ready(function () {
var add_fields = "" +
"<div class='col-md-3 form-group pull-right'>" +
"<label>Please select a field type</label>" +
"<select name='add_fields' class='form-control' id='add_fields'>" +
"<option value=''>Please Select a value</option>" +
"<option value='text'>Text Field</option>" +
"<option value='select'>Select List</option>" +
"<option value='radio'>Radio Buttons</option>" +
"<option value='checkboxes'> Checkboxes</option>" +
"<option value='file'> File Upload</option>" +
"</select></div>";
var text_field_append= "" +
"<div class='row'>" +
"<div class='col-md-3 '>" +
"<div class='form-group'>" +
"<label>Add Field Label</label>" +
"<input type='text' name='textfield_label' class='form-control'>" +
"</div>" +
"</div>" +
"<div class='col-md-3'> " +
"<label></label><input type='text' placeholder='' name='' class='form-control field' disabled >" +
"</div>" +
"</div>";
$('#add_form').on('click',function (e) {
$('#form_holder').append(add_fields);
$('#add_fields').on('change',function () {
if($(this).val()=='text'){
$('#form_holder').append(text_field_append);
var nearest_field= $("[name='textfield_label']").closest('.row').find('.field');
$("[name='textfield_label']").on('input',function(e){
$(nearest_field).attr("placeholder", $(this).val());
var field_name =$(this).val().replace(/ /g,"_");
$(nearest_field).attr("name", field_name);
});
}
})
})
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="col-md-12">
<h1>Please use Following wizard to generate your form  </h1>
<p>Click on Add Fields to get started </p>
<a id="add_form" class="btn btn-primary pull-right">Add Fields</a>
</div>
<form id="myform">
<div id="form_holder">
</div>
</form>

现在在添加文本字段时，我选择最近的添加元素，如下所示:

var nearest_field= $("[name='textfield_label']").closest('.row').find('.field');

问题是，我只想在选择所有元素时选择最新添加的(最近的)元素，有人能告诉我如何修复它吗

Answer 1

问题部分是由于动态内容中重复的id属性，需要用公共类属性和嵌套的事件处理程序替换。

为了解决问题和改进逻辑，从JS中删除所有的HTML，并将其放在HTML的"模板"中。理想情况下，你的JS应该完全不包含HTML，因为它违反了关注点分离原则

从那里你可以使用委托的事件处理程序，在运行时绑定，来处理所有动态元素上的事件。这些事件处理程序可以使用DOM遍历将'label'与相关的'占位符'关联起来。

最后，请注意，字段类型的模板使用一种模式，即其id的第一部分匹配用于附加它的option的value。这样代码是可扩展的，逻辑也可以简化。

试试这个:

jQuery($ => {
let $add_form = $('#add_form');
let $form_holder = $('#form_holder');
let add_fields = $('#fields').html();

$add_form.on('click', function(e) {
$form_holder.append(add_fields);
});

$form_holder.on('change', '.add_fields', e => {
let fieldHtml = $(`#${e.target.value}_field`).html();
$form_holder.append(fieldHtml);
});

$form_holder.on('input', '.text-field-label', e => {
let $label = $(e.target);
let labelValue = $label.val();
let $placeholder = $label.closest('.row').find('.text-field');
$placeholder.prop({
placeholder: labelValue,
name: labelValue,
value: labelValue.replace(/ /g, '_')
});
});
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-12">
<h1>Please use Following wizard to generate your form </h1>
<p>Click on Add form to get started </p>
<a id="add_form" class="btn btn-primary pull-right">Add Form</a>
</div>
<form id="myform">
<div id="form_holder"></div>
</form>
<script type="text/html" id="fields">
<div class="col-md-3 form-group pull-right"><label>Please select a field type</label>
<select name="add_fields" class="form-control add_fields">
<option value="">Please Select a value</option>
<option value="text">Text Field</option>
<option value="select">Select List</option>
<option value="radio">Radio Buttons</option>
<option value="checkboxes">Checkboxes</option>
<option value="file">File Upload</option>
</select>
</div>
</script>
<script type="text/html" id="text_field">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label>Add Field Label</label>
<input type="text" name="textfield_label" class="form-control text-field-label" />
</div>
</div>
<div class="col-md-3">
<label></label>
<input type="text" placeholder="" name="" class="form-control text-field" disabled />
</div>
</div>
</script>