jQuery klicken Funktion vs Inline Onclick
https://stackoverflow.com/questions/815856
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Ich versuche, meinen Code neu zu organisieren und es unaufdringlich zu machen.
In erster Linie gibt es einen Link für eine Aktion auszuführen. Wenn Sie auf dem Link klicken, wird die Aktion über Ajax ausgeführt (der Ajax-Code ist hier nicht auf dem Code) und der Text wird von anderem Text ersetzt, was dem Benutzer bietet die Möglichkeit, die Aktion rückgängig zu machen. Wenn der Benutzer auf den Link Rückgängig klicken, Ajax die vorherige Situation wiederherzustellen und den Text bietet dem Benutzer die Aktion ausführen es wieder gezeigt wird.
Ich habe eine einfachere Version meines Problems in einer einzigen HTML-Datei (Code unten) hergestellt. Es gibt zwei Absätze. Wenn Sie auf den Link des ersten Absatzes klicken, die Inline-Onclick Aufruf verwendet, funktioniert der Code wie erwartet. Aber wenn Sie auf dem Link des zweiten Absatzes klicken, die jQuery Onclick-Funktion verwendet, wird der Undo-Link nicht funktioniert, und ich kann nicht herausfinden, warum.
Jede Hilfe? Vielen Dank!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function() {
$(".add2").click(function(){
var placeId = $(this).parents(".place").attr("id");
$("#" + placeId + " .add2").remove();
$("#" + placeId + " .actions").append("<span class=\"added\">Added!</span> <a class=\"undoadd2\" href=\"#\">Undo</a>");
return false;
})
$(".undoadd2").click(function(){
var placeId = $(this).parents(".place").attr("id");
$("#" + placeId + " .actions").find("span.added, a.add2").remove();
$("#" + placeId + " .actions").append("<a class='add2' onclick='copyPlace(\"" + placeId + "\"); return false;' href='#'>Add place</a>");
return false;
})
});
function addPlace(placeId){
$("#" + placeId + " .add").remove();
$("#" + placeId + " .actions").append("<span class=\"added\">Added!</span> <a class=\"undoadd\" href=\"#\" onclick=\"undoAddPlace('" + placeId + "'); return false;\">Undo</a>");
return false;
}
function undoAddPlace(placeId){
$("#" + placeId + " .actions").find("span.added, a.undoadd").remove();
$("#" + placeId + " .actions").append("<a class='add' onclick='addPlace(\"" + placeId + "\"); return false;' href='#'>Add place</a>");
return false;
}
</script>
</head>
<body id="home">
<div class="place" id="3435910">
<p class="actions"><a href="#" onclick="addPlace('3435910'); return false;" class="add">Add place</a></p>
</div>
<div class="place" id="3435912">
<p class="actions"><a href="#" class="add2">Add place</a></p>
</div>
</body>
</html>
Lösung
Da Sie dynamisch sind das Hinzufügen neuer Elemente in den DOM, müssen Sie die Click-Handler registrieren wieder auf die neuen Elemente.
Sie können mit .live für diese.
Aktualisieren
Da jQuery 1.7, die .on Verfahren werden bevorzugt, Art und Weise, dies zu tun.
Da jQuery 1.9 Die .live Methode entfernt wurde.
Andere Tipps
zeigt nur die Verwendung von .end () für eine flüssige Lösung:
$(function() {
$(".add2").click(function(){
return $(this).parents(".place")
.find(".add2")
.hide()
.end()
.find(".actions")
.append("<span class=\"added\">Added!</span> <a class=\"undoadd2\" href=\"#\">Undo</a>");
});
$('.undoadd2').live('click', function(){
return $(this).parents(".place")
.find(".actions")
.find("span.added, a.undoadd2")
.remove()
.end()
.end()
.find(".add2")
.show();
});
});
Da Sie dynamisch fügen neue Elemente in die DOM, werden Sie die click Handler wieder auf die neuen Elemente registrieren müssen. jQuery setzt die Prozedur, wenn Sie $('...').click(...) nennen.
Wow !! Dank euch allen!
Ich habe über das Live-Event lesen und letzten Arbeitscode lautet:
$(function() {
$(".add2").click(function(){
var placeId = $(this).parents(".place").attr("id");
$("#" + placeId + " .add2").hide();
$("#" + placeId + " .actions").append("<span class=\"added\">Added!</span> <a class=\"undoadd2\" href=\"#\">Undo</a>");
return false;
})
$('.undoadd2').live('click', function(){
var placeId = $(this).parents(".place").attr("id");
$("#" + placeId + " .actions").find("span.added, a.undoadd2").remove();
$("#" + placeId + " .add2").show();
return false;
});
Früher verwendete ich remove (), um den Text zu löschen, um die Aktion auszuführen bietet. Ich habe es für hide / show geändert, so habe ich nicht auch in der ersten Funktion Live verwenden.
Danke nochmal!
Der Click-Handler wird nicht abgeholt, wenn Sie das Element an den DOM hängen. Versuchen Sie jQuery mit dem Click-Handler registrieren, indem Sie die Zeile zu ändern (n), die wie folgt aussehen:
$("#" + placeId + " .actions").append("<span class=\"added\">Added!</span> <a class=\"undoadd\" href=\"#\" onclick=\"undoAddPlace('" + placeId + "'); return false;\">Undo</a>")
$("#" + placeId + " .actions").append("<span class=\"added\">Added!</span> <a class=\"undoadd\" href=\"#\" >Undo</a>");
$('#' + placeId + " .actions").find("span:last").find("a").click( function() {
undoAddPlace( placeId );
return false;
});
könnten Sie in der Lage sein, es zu tun einfacher, aber es sieht aus wie Sie mehr als eine Spanne auf den Absatz hinzugefügt werden könnten, so dass ich konservativ ging. Sie könnten auch die Kette wahrscheinlich aus append, aber ich dachte, die Neuauswahl den Punkt klarer gemacht.
