Question

我有一个附加了更改事件的select元素，这样当用户选择一个新选项时，该文本将被放入相应的input元素中。这工作正常：

$("select[name='" + dropdown_name + "']").live("change", function()
{
    text = $("select[name='" + dropdown_name + "'] option:selected").text();
    $("#" + inputfield).val(text);
});

但是，当更改另一个选择时，根据AJAX请求更改该选择字段的html。发生这种情况时，选择元素pre-HTML更改中的选定值将放入输入字段中。

$.get("file.php", {x: x, y: y}, function(text)
{
$("select[name='dropdown_name']").html(text).removeAttr("disabled");
    if (!$("select[name='dropdown_name'] option.selected").length)
    {
        $("select[name='dropdown_name'] option[value='1']").attr("selected", "selected");
    }
    $("#_inputfield").removeAttr("disabled");
});

如何在更改HTML时阻止仅发生特定功能？

Answer 1

1）删除绑定;

2）进行更改;

3）恢复绑定。

或使用一些选中的值（可能是隐藏输入的值） - 减少事件绑定更改。

Answer 2

您可以记录更改位于ajax控件中并访问更改事件中的内容。

(function(){
  var changedByAjax;
  $(document).on('change', 
                 "select[name='" + dropdown_name + "']", 
                 function() {
    var $select = $(this);
    // make sure the change wasn't by ajax
    if( !changedByAjax ) { 
      text = $select.find("option:selected").text();
      $("#" + inputfield).val(text);
    }
    changedByAjax = false; 
  });

  $.get("file.php", {x: x, y: y}, function(text) {
    var $select = $("select[name='dropdown_name']")
    $select.html(text).removeProp("disabled"); 

    // make note that we changed the value by ajax
    if ( !$select.find("option.selected").length ) {
      $select.find("option[value='1']").prop("selected", true);
    }
    $("#_inputfield").removeProp("disabled");
  });
}());

我在您的ajax调用中添加了changedByAjax并在更改事件中检查了它（还重置了更改后的事件中的值）。这比解除绑定和重新绑定的开销要小。通过将其置于IIFE中来保持私密性 - 这是范围的力量。然而，这也是一种以DOM为中心的方法。但是，唉，答案。

如何防止更改select的HTML时触发JQuery更改事件？

2 个答案: