Lassen Sie alle Links innerhalb eines Elements neue Inhalte in dasselbe Element laden - Javascript, HTML, Dom, JQuery

Dies ist eine Frage zu jQuery.

$(document).ready(function() {
$("li a").click(function(e) {
e.preventDefault();

var link = $(this).attr("href");

location.hash = link;

$("#content").load(link);
});
});

Wenn ich auf einen Link klicke, wird der #content div wird mit der Seite geladen und der Name mit einem Hashtag an die URL angehängt.

Aber ich möchte jede Seite in der #content div, geladen von jQuery, um dasselbe zu tun. Es funktioniert nur für den Originalinhalt.

Jetzt habe ich das:

$("#content a").click(function(e) {
e.preventDefault();

var link = $(this).attr("href");

location.hash = link;
});

Beispiel:

Ich habe donate.php von jQuery in geladen #content div, und wenn ich auf einen link auf der donate.php klicke, sollte dieser neue inhalte in die laden #content div.

Aber es funktioniert nicht.

Antworten:

4 für die Antwort № 1

Die Antwort ist Ereignisdelegierung. Seit der #content Das Element selbst wird nicht dynamisch geladen, und Sie möchten das a Elemente in diesem. Es ist wahrscheinlich am sinnvollsten, auf der zu delegieren #content Element. Versuche dies:

$("#content").on("click", "a", function(e) {
e.preventDefault();
var link = $(this).attr("href");
location.hash = link;
$("#content").load(link);
});

Auf diese Weise funktioniert es auch, wenn das Ankerelement dynamisch hinzugefügt wurde. Mehr dazu lesen Sie auf der .on() Dokumentation, Suche nach delegierten Ereignissen.

---

Um dies weiter zu erläutern, sagt die obige Lösung unter Verwendung von Delegation im Wesentlichen "Wenn es einen Klick innerhalb gibt" #contentÜberprüfen Sie, ob der Klick innerhalb eines a Element. "So wird dies funktionieren, ob das oder nicht a Element existierte zu dem Zeitpunkt, als diese Bindung hergestellt wurde.

Das unterscheidet sich von $("#content a").click(function(e) oder $("#content a").on("click", function(e) die beide sagen "binde einen Clickhandler an #content a", das Problem dabei ist, dass es nicht an a binden kann #content a das ist zum Zeitpunkt dieser Bindung noch nicht vorhanden.

---

1 für die Antwort № 2

Weil Sie die Links nach dem hinzufügenDokument bereit Ereignis wurde abgeschlossen. Die Links erhalten nicht den ihnen zugeordneten Ereignishandler. Damit Ihre Links funktionieren, möchten Sie sie mit dem Dokument verknüpfen und verwenden on()

$(document).on("click", "#content a", function (e) {
e.preventDefault();
var link = $(this).attr("href");
location.hash = link;
}):

---

0 für die Antwort № 3

Zu diesem Zweck haben wir die .on:

$(document).on("click", "#content a", function(e) {
e.preventDefault();
var link = $(this).attr("href");
location.hash = link;
});

---

0 für die Antwort № 4

.auf Dokumentation

$("#content").on("click", "a", function(e) {
e.preventDefault();

var link = $(this).attr("href");

location.hash = link;
});

Wenn Sie dynamische Elemente hinzufügen, müssen Sie sie mit Code versehen .auf

---