Question

我有一个按钮，用于添加带有选择标签的新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);
        })
    }

Answer 1

因此，我对您的代码进行了一些更改-

使用 classes 代替 ids -因为您不能拥有多个id 。
我在这里使用template literals是因为我喜欢它：）
使用$(document).on('change', '.cam_select' + x, function(e) {-off('change')了解如何使用动态jquery侦听器，以确保没有重复的侦听器，尽管这里没有任何侦听器。
我们还可以使用e.target获得 clicked 元素，其中e是事件对象。
请注意，我已经在附加的标记中添加了另外一个 wrapper -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>

Answer 2

您可以使用类选择器代替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);
})

我没有尝试过代码，对不起，如果有错误

Answer 3

@Allesandro采取了正确的行动。

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

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

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

您当然也可以更具体一些，并使用wrapper代替document作为初始选择器。

Event delegation：

事件委托允许我们将单个事件侦听器附加到父元素，它将为所有与a匹配的后代触发选择器，无论这些后代现在存在还是被添加到未来。

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

3 个答案: