Comment lier un événement après un succès ajax dans jQuery

Question

Voici donc mon code :

$(document).ready( function() {
$('#form').bind('change', function(){
    $.ajax({
    type: 'get',
    url: 'api.php',
    data: 'task=getdirs&formname='+$('#form').attr('value'),
    dataType: "text",
    success: function (html){
        $('#chdir').html(html);
        $('#chdir select').bind('change', getDirs());
        }
    });
});
function getDirs(){
}})

#form ici a un <select> élément. L'appel ajax renvoie un morceau de html avec un nouvel élément <select> élément.
Cela fonctionne bien : dans le #chdir div, j'obtiens un nouvel élément de liste déroulante. Mais l'événement à l'intérieur de l'élément success ne se déclenche qu'une seule fois. Ensuite, cet événement ne fonctionne plus du tout.
Que puis-je faire pour que le nouveau <select> fonctionne-t-il de la même manière que le premier ?

Answer 1

Vous invoquez le getDirs directement sur la fonction bind vous ne devriez le faire que si cette fonction renvoie une autre fonction, mais je pense que ce n'est pas le cas.

Changement :

$('#chdir select').bind('change', getDirs());

A :

$('#chdir select').bind('change', getDirs);

Ou si vous utilisez jQuery 1.4+, vous pouvez lier la balise change avec l'événement live qu'une seule fois, et vous n'aurez pas besoin de lier à nouveau l'événement par la suite :

$(document).ready(function () {
  $('#chdir select').live('change', getDirs);
});

Answer 2

Parce que cet article de SO est apparu dans ma recherche Google, j'ai pensé qu'il fallait que je le mentionne. .live est obsolète depuis la version 1.9, et la méthode recommandée est maintenant .on

http://api.jquery.com/on/

Answer 3

Si je comprends bien, le problème vient du fait que l'événement ne fonctionne pas avec l'élément de sélection créé dynamiquement.

Si c'est le cas, la solution est simple... essayez ceci :

$('#form').live('change', function()...

Mise à jour : Avec les versions plus récentes de jQuery, vous devez utiliser on() au lieu de live() .

Answer 4

Si vous utilisez jQuery 1.9+, .on doit être utilisée pour attacher des gestionnaires d'événements. Cependant, après avoir ajouté le code HTML au document, vous devez encore attacher de nouveaux gestionnaires d'événements.

Pour écrire un petit morceau de code simple et fonctionnel et gérer de nouveaux éléments, vous pouvez utiliser .on sur le document :

$(document).on('click', '.close-icon', function() { // selector as a parameter
    $(this).parent().fadeOut(500); // - example logic code
});

Answer 5

Au lieu d'utiliser bind, essayez d'utiliser .live . Pour ce faire, vous aurez besoin de la dernière version de jQuery.