jQuery .live fonctionne seulement parfois

Question

J'ai une zone de texte et une DropDownList. Le DropDownList est rempli en fonction de l'entrée dans la zone de texte. Il y a quelques problèmes que j'ai où le DropDownList n'est pas rempli correctement.

Un est quand je tape quelque chose dans la zone de texte que je peux tabuler à DropDownList et l'ai rempli correctement. Mais si je décide que je veux changer ce qui est dans la zone de texte et y taper quelque chose d'autre, puis essayez de tabuler à la DropDownList à nouveau, il ne met pas à jour. Un autre problème est lorsque je commence à taper dans la zone de texte, j'ai une liste de saisie semi-automatique qui apparaît et je peux cliquer sur une option pour qu'elle remplisse la zone de texte pour moi, mais quand je le fais, la DropDownList n'est pas remplie.

Ceci est le javascript que je dois remplir DropDownList.

$('#textFrame').live('change', function (event) { 
    $.ajax({ 
     type: 'POST', 
     url: '@Url.Action("GetDirectors", "HostScan")', 
     data: { frame: $(this).val() }, 
     success: function (data) { 
      var markup = ''; 
      for (var x = 0; x < data.length; x++) { 
       markup += '<option value="' + data[x].Value + '">' + data[x].Text + '</option>'; 
      } 
      $('#DirectorList').html(markup).show(); 
     } 
    }); 

});

Que devrais-je changer pour que cela fonctionne?

Merci d'avance pour votre aide!

Answer 1

La première chose est que .live est obsolète à partir de jQuery 1.7.0. Essayez d'utiliser .on à la place. Deuxièmement, utilisez le fichier jQuery hébergé par google cdn .. Il aidera à réduire la bande passante de votre site. En ce qui concerne le code, essayez d'effacer les options avant d'ajouter de nouvelles valeurs. Cela garantit que vous n'ajoutez pas de nouvelles options aux options précédentes.

$(function(){ 

    $('#textFrame').on('change', function() { 
     $.ajax({ 
      type: 'POST', 
      url: '@Url.Action("GetDirectors", "HostScan")', 
      data: { frame: $(this).val() }, 
      success: function (data) { 
       if(data != null){ 
       var markup = ''; 
       $('#DirectorList').find('option').remove(); 
        for (var x = 0; x < data.length; x++) { 
         markup += '<option value="' + data[x].Value + '">' + data[x].Text + '</option>'; 
        } 
       $('#DirectorList').append(markup).show(); 
       } 
      } 
     }); 
    }); 
});