Comment empêcher que l'événement JQuery ne se déclenche lorsque le code HTML de select est modifié?

Question

J'ai un élément de sélection qui a un événement de modification attaché de sorte que, lorsque l'utilisateur sélectionne une nouvelle option, ce texte est placé dans un élément d'entrée correspondant. Cela fonctionne très bien:

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

Cependant, lorsque l'on sélectionne un autre est modifié, le code HTML de ce champ de sélection est modifiée selon une requête AJAX. Lorsque cela se produit, la valeur sélectionnée dans le changement de pré-HTML de l'élément de sélection est placée dans le champ de saisie.

$.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"); 
}); 

Comment empêcher cette fonction particulière de se produire que lorsque le HTML est changé?

Answer 1

1) retirer la liaison;

2) effectuer des modifications;

3) rétablir la liaison.

Ou utilisez une valeur vérifiée (peut-être, la valeur de l'entrée masquée) - pour réduire les changements de liaison d'événement.

Answer 2

Vous pouvez ouvrir une session que le changement était dans le contrôle ajax et l'accès que dans votre cas de changement ..

(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"); 
    }); 
}()); 

j'ajouté changedByAjax dans votre appel ajax et vérifié dans votre événement changement (également réinitialiser la valeur dans l'événement modifié). C'est moins de frais généraux que de délier et de relier. Gardé privé en le mettant dans un IIFE - le pouvoir de la portée. Cependant, c'est trop centré DOM d'une approche. Mais, hélas, une réponse.