我有一个按钮，可以添加一个带有选择标签的新div，每个选项都有自定义属性。我的问题是当我创建多个div 时，该函数仅指我在尝试更改函数没有响应的第一个选择标签时创建的最后一个div。
我试图为所有div 和输入提供不同的 id，但这不起作用。
<button type="button" class="cam_field_button btn waves-effect waves-light btn-outline-info" >הוסף צלם</button>
var max_fields = 25; //maximum input boxes allowed
var wrapper = $(".camera_men"); //Fields wrapper
var add_button = $(".cam_field_button"); //Add button ID
var x = 0; //initlal text box count
$(add_button).click(function (e) { //on add input button click
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
$(wrapper).append('<div> <br> <select name="cam[]" id="cam_select'+x+'" class="form-control" >n' +
' <option email="email" phone="phone" value="צלם 1">צלם 1</option>n' +
' <option email="email2" phone="phone2" value="צלם 2">צלם 2</option>n' +
' <option email="email3" phone="phone3" value="צלם 3">צלם 3</option>n' +
' </select><a href="#" class="remove_field">הסר צלם ' + x + '</a><div> <input type="hidden" name="cam_email[]" id="cm_email' + x + '">n' +
' <input type="hidden" name="cam_phone[]" id="cm_phone' + x + '">'); //add input box
$('#cam_select'+x).on('change',function () {
var email = $('#cam_select'+x+' option:selected').attr("email");
var phone = $('#cam_select'+x+' option:selected').attr("phone");
$('#cm_email'+x).val(email);
$('#cm_phone'+x).val(phone);
})
}
所以我
对您的代码进行了一些更改-
- 使用类而不是 id - 因为你不能有多个 id。
- 我在这里使用了
template literals，因为我喜欢它:) - 看看我如何使用动态 jquery 侦听器
$(document).on('change', '.cam_select' + x, function(e) {-off('change')确保没有重复的侦听器，尽管这里没有任何重复的侦听器。 - 此外，我们还可以使用
e.target获取单击的元素，其中e是事件对象。 - 请注意，我在追加的标记中添加了一个包装器 -
cam以及我如何使用closest函数使用它，然后find方法在动态插入的cam包装器中查找兄弟姐妹和表亲。
查看下面的演示，说明这些内容：
$(document).ready(function() {
var max_fields = 25;
var wrapper = $(".camera_men");
var add_button = $(".cam_field_button");
var x = 0;
$(add_button).click(function(e) {
e.preventDefault();
if (x < max_fields) {
x++;
$(wrapper).append(`
<div class="cam">
<div>
<select name="cam[]" class="form-control cam_select">
<option email="email" phone="phone" value="צלם 1">צלם 1</option>
<option email="email2" phone="phone2" value="צלם 2">צלם 2</option>
<option email="email3" phone="phone3" value="צלם 3">צלם 3</option>
</select>
<a href="#" class="remove_field">הסר צלם ${x}</a>
<div>
<input type="input" name="cam_email[]" class="cm_email">
<input type="input" name="cam_phone[]" class="cm_phone">
</div>`);
$(document).off('change').on('change', '.cam_select', function(e) {
var email = $(e.target).find('option:selected').attr("email");
var phone = $(e.target).find('option:selected').attr("phone");
$(e.target).closest('.cam').find('.cm_email').val(email);
$(e.target).closest('.cam').find('.cm_phone').val(phone);
});
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="cam_field_button btn waves-effect waves-light btn-outline-info">הוסף צלם</button>
<div class="camera_men"></div>您可以使用类选择器代替 id
例：
...
$(wrapper).append(<select class="form-control cam_select" >...</select>...)
...
$('.cam_select').on('change',function () {
var email = $('option:selected',this).attr("email");
var phone = $('option:selected',this).attr("phone");
$(this).parent().children('.cm_email').val(email);
$(this).parent().children('.cm_email').val(phone);
})
我没有尝试过代码，如果有错误，对不起
@Allesandro以
正确的方式采取了行动。
您可以将事件处理程序代码与创建方法分离（按钮单击），只需在脚本中提供事件处理程序逻辑，以便它可用于我们正在讨论的文档和控件。
但是，您必须使其成为所谓的jQuery委托事件处理程序，该处理程序将用于即时新创建的控件（这是您的方案）以及与最初加载文档时已在html中的选择器匹配的控件：它看起来像这样：
$(document).on('change', '.cam_select', function () {
...
})
您还可以更具体地偏离路线，并使用wrapper作为初始选择器而不是document。
活动委托：
事件委托允许我们将单个事件侦听器附加到 父元素，将为所有与 a 匹配的后代触发 选择器，这些后代是现在存在还是添加到 前途。