webentwicklung-frage-antwort-db.com.de

Wie Sie ein angefügtes Element mit Jquery entfernen und warum Bind oder Live dazu führt, dass Elemente wiederholt werden

Jetzt weiß ich, dass diese grundlegende Frage schon einmal gestellt wurde, aber ich muss etwas falsch machen. Ich weiß, dass ein angehängtes Element gebunden werden muss, bevor ich etwas dagegen tun kann. Versuchen Sie es doch so gut wie möglich, ich kann es nicht zum Laufen bringen.

Ich ziehe eine Nachricht ein und zeige an, wenn Personen auf ein Radio-Select klicken. Wann immer ich versuche, das neue Element zu binden, stapelt es auf seltsame Weise. Es beginnt, die Elemente zu stapeln. zB- [Klick 1] Nachricht 1, [Klick 2] Nachricht 1 und 2 usw.

Ich habe eine ganze Reihe verschiedener Möglichkeiten ausprobiert, um es zu binden. Meine Hoffnung war das Entfernen von #feedback und das Erstellen und Binden der nächsten Nachricht. Ich muss etwas schrecklich falsch machen. Ich weiß, dass dies anderen Posts sehr ähnlich ist, aber ich habe alle durchgegangen und konnte keine klare Antwort finden, um zu helfen. Danke im Voraus.

Das 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>');
    });
};
11
user1197728

Wenn ich deine Frage richtig verstanden habe, habe ich eine Geige gemacht, die dies richtig funktioniert. In dieser Ausgabe erfahren Sie, wie Sie die Event-Handler zuweisen und wie andere bereits gesagt haben, dass Sie über Event-Handler verfügen. Die aktuelle jQuery-Best Practice ist die Verwendung von on() zum Registrieren von Ereignishandlern. Hier ist ein Link zu den jQuery-Dokumenten über on: link

Ihre ursprüngliche Lösung war ziemlich nahe, aber die Art und Weise, wie Sie die Ereignishandler hinzugefügt haben, ist etwas verwirrend. Es gilt als bewährte Methode, keine Ereignisse zu HTML-Elementen hinzuzufügen. Ich empfehle, sich über das unauffällige JavaScript zu informieren.

Hier ist der JavaScript-Code. Ich habe eine Zählervariable hinzugefügt, damit Sie sehen können, dass sie korrekt funktioniert.

$('#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

Die Funktion live registriert einen Click-Ereignishandler. Dies wird jedes Mal durchgeführt, wenn Sie auf das Objekt klicken. Wenn Sie also zweimal darauf klicken, weisen Sie dem Objekt zwei Klick-Handler zu. Sie weisen hier auch einen Click-Handler zu:

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

Dieser Click-Handler weist dann einen weiteren Click-Handler über live() zu.

Wirklich, was Sie meiner Meinung nach tun möchten, ist Folgendes:

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

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

Ok, versuchen Sie, mit Ihrem Kommentar den onclick-Teil des <a>-Elements herauszunehmen und dies stattdessen in einen document.ready()-Handler zu setzen.

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

Ich würde so etwas machen:

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

Verfügen Sie über mehrere Optionsfelder auf der Seite? 

Ich sehe nämlich, dass Sie die Ereignisse allen Optionsfeldern auf der Seite zuweisen, wenn Sie auf ein Optionsfeld klicken

0
Sushanth --

sie könnten replaceAll verwenden, anstatt replaceAll zu entfernen.

0
Masoud