如何防止選擇的HTML更改時觸發JQuery更改事件？

我有一個select元素附加了一個更改事件，以便當用戶選擇一個新選項時，該文本被放置到相應的輸入元素中。這工作正常：如何防止選擇的HTML更改時觸發JQuery更改事件？

$("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被改變？

來源

2010-06-28 Bex

1）去除結合;

2）進行修改;

3）恢復綁定。

或者使用一些選中的值（也許是隱藏輸入的值） - 減少事件綁定更改。

來源

2010-06-28 04:56:37 kpower

A有一個類似的問題，這是最好的解決方案，謝謝。 – tif 2012-05-04 07:57:50

您可以登錄該變化是在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爲中心的一種方法。但是，唉，一個答案。

來源

2010-06-28 05:00:31

如何防止選擇的HTML更改時觸發JQuery更改事件？

回答

相關問題