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

Question

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

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

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

我加changedByAjax到你的Ajax调用，并在您变化事件检查它（也重置更改的事件中的值）。这比解除绑定和重新绑定的开销少。把它放在IIFE中是保密的 - 这是范围的力量。但是，这也是以DOM为中心的一种方法。但是，唉，一个答案。