如何为每个追加 div 元素设置 onchange 函数

Question

我有一个按钮可以添加带有 select 标签的新 div，每个选项都有自定义属性。我的问题是，当我创建多个 div 时，该函数仅引用我创建的最后一个 div，当我试图更改第一个 select 标记时，该函数没有响应。

我曾尝试为所有 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);
        })
    }

Answer 1

您可以使用 class 选择器代替 ids

示例：

...
$(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);
})

代码我没有试过，如有错误请见谅

Answer 2

@Allesandro 迈出了正确的一步。

您可以从创建方法（单击按钮）中分离事件处理程序代码，并仅在脚本中提供事件处理程序逻辑，以便我们正在讨论的文档和控件可以使用它。

但是，您必须将其设为所谓的 jQuery 委托事件处理程序，它将用于即时新创建的控件（这是您的场景）以及与选择器匹配的控件在最初加载文档时已经 html 中：它看起来像这样：

$(document).on('change', '.cam_select', function () {
  ...
})

您也可以更具体一些，使用 wrapper 作为初始选择器而不是 document。

Event delegation:

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

Answer 3

所以我对你的代码做了一些修改 -

使用类而不是ids - 因为你不能有多个id.
我在这里用了template literals因为我喜欢:)
看看我是如何使用动态 jquery 侦听器的 $(document).on('change', '.cam_select' + x, function(e) { - off('change') 来确保没有重复的侦听器，尽管这里没有。
我们还可以使用 e.target 获取 clicked 元素，其中 e 是事件对象。
请注意，我在附加标记中又添加了一个 wrapper - cam 以及我如何使用 closest function and then find 方法来查找 siblings and cousins in the cam wrapper which was dynamically inserted.

查看下面的演示：

$(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>

如何为每个追加 div 元素设置 onchange 函数

how to set onchange function to each append div element

html

javascript

jquery

jquery-traversing