记录变更类，拾取两个元素

Question

我有一个HTML表单块，在同一页面上包含两次。这样做是因为一个在页面上，一个在模态内。

表单有一个类为.select_one的select元素。因此，由于表单被包含在页面上两次，因此有两个元素具有类.select_one。

我通过jQuery进行了文档更改检查。

 $(document).on("change", '.select_one', function (e) {
        var select_one = $(this).val();
        $.ajax({
            type: "POST",
            data: {select_one: select_one},
            url: '../../ajax/change_select_two.php',
            dataType: 'json',
            success: function (json) {
                console.log(json);
                var $el = $("select.select_two");
                $el.each(function() {

                    var $select_picker = $(this);
                    $select_picker.empty(); // remove old options
                    $select_picker.append($("<option></option>")
                        .attr("value", '0').text('Please Select Two'));
                    $.each(json, function (value, data) {
                        $select_picker.append($("<option></option>")
                            .attr("value", data['Model']).text(ucwords(data['Text'].replace(/_/g, ' '))));
                    });
                    $select_picker.selectpicker('refresh');
                });
            }
        });
    });

这将根据select选项的值发送Ajax请求，以返回一些值并在表单中填充另一个select选项。

当我更改其中一个表单.select_one时，它正在运行此文档更改功能两次（每个`.select_one'一次），而不仅仅是正在更改的那个。

为什么会发生这种情况，最佳解决方案是什么？

Answer 1

在对这个问题的评论中，你说过：

  

ajax请求被解雇了两次。

如果单个select更改，问题中的代码（如果只运行一次）将不会多次触发处理程序。

这告诉我们发生了两件事之一：

1. 您问题中的代码多次运行，或

2. 收到第一个change事件时，有些事情会产生第二个change事件

多次运行代码

在这种情况下，您的问题中的代码将多次运行 ，每次都会挂起一个新的处理程序，如下所示：

function hookUp() {
  $(document).on("change", ".select_one", function() {
    console.log("Handler fired");
  });
}
hookUp();
hookUp();

<select class="select_one">
  <option>This</option>
  <option>That</option>
  <option>The Other</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

现在，你显然没有像hookUp(); hookUp();这样明显的事情，但某事正在调用你的

$(document).on("change", '.select_one', function (e) {
    // ...
});

代码两次。

生成change事件

在处理第一个change事件时，某事会导致生成第二个change事件;例如，可能与更新的select_two选择框相关联。

我的合成例子显然不是真正发生的事情，而是为了说明：

var synthetic = 0;
$(document).on("change", ".select_one", function() {
  console.log("Handler fired");
  if (!synthetic) {
    ++synthetic;
    $(this).change();
    --synthetic;
  }
});

<select class="select_one">
  <option>This</option>
  <option>That</option>
  <option>The Other</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

你有两个 .select_one ，肯定有两个 .select_two

$(document).on('change', '.select_one', function(e){
    var select_one = $(this).val();

    // Your problem solved here
    var $el = $(this).closest('form').find('select.select_two');

    $.ajax({
        type: 'POST',
        data: {select_one: select_one},
        url: '../../ajax/change_select_two.php',
        dataType: 'json',
        success: function (json) {
            console.log(json);
            $el.each(function() {
                var $select_picker = $(this);
                $select_picker.empty(); // remove old options
                $select_picker.append($('<option></option>')
                    .attr('value', '0').text('Please Select Two'));
                $.each(json, function (value, data) {
                    $select_picker.append($('<option></option>')
                        .attr('value', data['Model']).text(ucwords(data['Text'].replace(/_/g, ' '))));
                });
                $select_picker.selectpicker('refresh');
            });
        }
    });
});