[英]how to set onchange function to each append div element
我有一个按钮,添加一个带有选择标签的新 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);
})
}
所以我对您的代码进行了一些更改-
template literals
是因为我喜欢它:)$(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
。
事件委托:
事件委托允许我们将单个事件侦听器附加到父元素,该事件侦听器将为匹配选择器的所有后代触发,无论这些后代现在存在还是将来添加。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.