web-dev-qa-db-fra.com

Comment supprimer un élément ajouté avec Jquery et pourquoi bind ou live entraîne la répétition d'éléments

Maintenant, je sais que cette question fondamentale a déjà été posée, mais je dois faire quelque chose de mal. Je sais qu'un élément ajouté doit être lié avant que je puisse y faire quelque chose. Cependant, autant que je puisse, je ne peux pas le faire fonctionner.

Je tire un message et affiche lorsque les gens cliquent sur une radio sélectionnez. Chaque fois que j'essaie de lier le nouvel élément, il s'empile de façon étrange. Il va commencer à empiler les éléments. Par exemple: [Cliquez 1] message 1, [Cliquez 2] message 1 et 2 et ainsi de suite.

J'ai essayé tout un tas de façons différentes de le lier. J'espérais que la suppression éliminerait #feedback, puis créerait et lierait le message suivant. Je dois faire quelque chose de terriblement faux. Je sais que cela ressemble beaucoup à d’autres articles, mais j’ai parcouru chacun d’entre eux et j’ai été incapable de trouver une réponse suffisamment claire pour vous aider. Merci d'avance.

Le HTML

<div class="answers">
    <ul>
        <li>
            <input id="answer" type="radio" onclick="feedback('THE MESSAGE HTML')"><label>Label</label>
        </li>
    </ul>
</div>

JavaScript:

function feedback(message)
{
    $('#answer').live('click', function()
    {
        $('#feedback').remove();
    });

    $('#answer').live('click', function()
    {
        $('.answers').append('<div id="feedback">'+message+'</div>');
    });
};
jqueryappendbindlive
11
user1197728

Si j'ai bien compris votre question, j'ai créé un violon qui a fonctionné correctement. Ce problème concerne la façon dont vous assignez les gestionnaires d’événements et, comme d’autres l’ont déjà dit, vous avez des gestionnaires d’événements. La meilleure pratique actuelle de jQuery consiste à utiliser on() pour enregistrer les gestionnaires d'événements. Voici un lien vers la documentation jQuery à propos de on: link

Votre solution initiale était assez proche, mais la façon dont vous avez ajouté les gestionnaires d'événements est un peu déroutante. Il est recommandé de ne pas ajouter d'événements aux éléments HTML. Je recommande de lire sur JavaScript Unobstrusive.

Voici le code JavaScript. J'ai ajouté une variable de compteur pour que vous puissiez voir qu'il fonctionne correctement.

$('#answer').on('click', function() {
  feedback('hey there');
});

var counter = 0;

function feedback(message) {

  $('#feedback').remove();

  $('.answers').append('<div id="feedback">' + message + ' ' + counter + '</div>');

  counter++;    
}
14
richoffrails

La fonction live enregistre un gestionnaire d'événements click. Cela se fera chaque fois que vous cliquerez sur l'objet. Ainsi, si vous cliquez deux fois dessus, vous affectez deux gestionnaires de clics à l'objet. Vous assignez également un gestionnaire de clics ici:

onclick="feedback('the message html')";

Et puis ce gestionnaire de clics affecte un autre gestionnaire de clics via live().

Vraiment ce que je pense que vous voulez faire est la suivante:

function feedback(message)
{
    $('#feedback').remove();

    $('.answers').append('<div id="feedback">'+message+'</div>');
}

Selon votre commentaire, essayez de supprimer la partie onclick de l'élément <a> et de la placer dans un gestionnaire document.ready().

$('#answer').live('click',function(){
                     $('#feedback').remove();
                     $('.answers').append('<div id="feedback">'+message+'</div>');
                 });
1
Phillip Schmidt

Je ferais quelque chose comme:

$(documento).on('click', '#answer', function() {
  feedback('hey there');
});
0
Lucas S.

Avez-vous plusieurs boutons radio sur la page .. 

Parce que je vois que vous assignez les événements à tous les boutons radio de la page lorsque vous cliquez sur un bouton radio.

0
Sushanth --

vous pouvez utiliser replaceAll au lieu de remove and append replaceAll

0
Masoud