événement Click ne fonctionne pas après avoir remplacé les éléments

Question

j'ai reçu ce code:

$(function() { 
    $('#or').click(function() { 
     $("#m0").html('<input type="text" class="highlight" name="test1"/>'); 
    }); 
}); 

Son fonctionne bien et il ne remplace le:

<label><input type="radio" id="or" name="type" value="1"/>Click me</label>

avec l'entrée de texte, apparaît le problème quand je clique sur #or cliquez ailleurs (alors il remplace avec le contenu original), et quand j'ajoute le contenu original en arrière, cela ne fonctionne pas.

Ceci est le code que j'utilisé pour remplacer le text input sur remplacé #m0 avec l'original un:

$(function() { 
    $('.m').click(function() { 
     $("#m0").html('<label><input type="radio" id="or" name="type" value="1"/>Click me</label>'); 
    }); 
}); 

Donc, pour être sûr que vous ne me comprenez:

Le contenu original est:

<label><input type="radio" id="or" name="type" value="1"/>Click me</label>

puis je l'utilise pour remplacer ce qui précède par une saisie de texte:

$(function() { 
    $('#or').click(function() { 
     $("#m0").html('<input type="text" class="highlight" name="test1"/>'); 
    }); 
}); 

puis ... j'utiliser ce code pour restaurer sur le contenu original:

$(function() { 
    $('.m').click(function() { 
     $("#m0").html('<label><input type="radio" id="or" name="type" value="1"/>Click me</label>'); 
    }); 
}); 

Et enfin, quand:

<input type="text" class="highlight" name="test1"/>

est remplacé par:

<label><input type="radio" id="or" name="type" value="1"/>Click me</label>

L'événement click ne marche plus.

Answer 1

Utilisez la méthode en direct, qui lie les événements, même après une mise à jour DOM http://api.jquery.com/live/

$(function() { 
    $('#or').live('click', function() { 
     $("#m0").html('<input type="text" class="highlight" name="test1"/>'); 
    }); 
}); 

Answer 2

Remplacer .click(...) avec .live("click", ...)

Answer 3

Vous devez faire les gestionnaires d'événements live:

$('#or').live("click", function() { 
    //Event hander code 
}); 

De la documentation jQuery pour live:

Joindre un gestionnaire à l'événement pour tous les éléments qui correspondent au sélecteur actuel, maintenant et dans le futur.

Le problème est que le gestionnaire d'événements est lié à l'élément qui existe dans le DOM au moment de la liaison. Lorsque cet élément est supprimé, le gestionnaire d'événements est supprimé avec. Lorsque vous ajoutez un nouvel élément (c'est un nouvel élément, même s'il ressemble à l'ancien), le gestionnaire d'événements n'y est pas lié. C'est là que live est pratique. Il surveille le DOM pour l'ajout d'éléments qui correspondent au sélecteur et applique le gestionnaire d'événements à tous ceux qui le font.

Answer 4

Mise à jour Cette réponse est était pas à jour. Vérifiez JQuery.on, qui combine le meilleur des deux mondes. Il vous permet de lier un événement à un élément, tandis que l'événement lui-même est ciblé sur les éléments à l'intérieur de cet élément. C'est comme live, seulement vous pouvez choisir un élément cible spécifique, (par exemple un élément de conteneur dans lequel le contenu Ajaxed est ajouté/changé). on remplace live, bind et delegate.

réponse originale (pour JQuery avant 1.7): méthode de JQuery live, comme le suggère les réponses, est le moyen facile, mais il a quelques inconvénients. C'est plus lent, car chaque modification du DOM provoque la réévaluation de tous les sélecteurs 'live'.

Voir aussi cette réponse pour certains inconvénients: Performance difference between jQuery's .live('click', fn) and .click(fn)

Par conséquent, j'utilise plutôt bind ou click pour lier explicitement l'événement, cliquez sur les éléments nouvellement créés. C'est un peu plus de travail (bien que négligeable si vous structurez votre code correctement) et cela vous donne de meilleures performances et plus de contrôle.