当select的HTML被更改时，如何防止JQuery更改事件触发?

I have a select element that has a change event attached so that, when the user selects a new option, that text is placed into a corresponding input element. That's working fine:

我有一个带有更改事件的select元素，以便当用户选择一个新选项时，该文本将被放置到相应的输入元素中。这是工作正常:

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

However, when another select is changed, that select field's html is changed according to an AJAX request. When this happens, the selected value from the select element pre-HTML change is placed into the input field.

但是，当另一个select更改时，该select字段的html将根据AJAX请求进行更改。当发生这种情况时，从select元素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");
});

How do I prevent that particular function from occurring only when the HTML is changed?

如何防止仅在HTML被更改时才出现该特定函数?

2 个解决方案

#1

1) remove binding;

1)删除绑定;

2) make changes;

2)修改;

3) restore binding.

3)恢复绑定。

Or use some checked value (maybe, value of hidden input) - to reduce event binding changes.

或者使用一些检查值(可能是隐藏输入的值)来减少事件绑定更改。

#2

You could log that the change was in the ajax control and access that in your change event..

您可以将更改记录在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");
  });
}());

I added changedByAjax into your ajax call and checked for it in your change event (Also reset the value in the changed event). This is less overhead than unbinding and rebinding. Kept it private by putting it in an IIFE - the power of scope. However, this is way too DOM centric of an approach. But, alas, an answer.

我在ajax调用中添加了changedByAjax，并在更改事件中检查它(还重置了更改事件中的值)。这比取消绑定和重新绑定的开销要小。把它放在一个生命的范围内，把它保密。然而，这是一种以DOM为中心的方法。但是,唉,一个答案。

#1