Event-Handler trifft nicht auf das erzeugte Element zu

Question

Nun, der Titel mag überhaupt keinen Sinn ergeben. Aber trotzdem, ich habe einige einfache Codes, um es zu verdeutlichen.

Ich benutze JQuery 1.3.2

Hier meine JS ist

$(document).ready(function() { 
    $('#test').click(function() { 
    $('#result').html('<a href="#" id="hello">hello world</a>'); 
    }); 

    $('#hello').click(function() { 
    $('#result').html('<a href="#" id="asdf">Test #2</a>'); 
    }); 
}); 

In html, habe ich einen Hyperlink id = 'test' und ein div mit id = 'Ergebnis'. Was ich von diesem JS-Code erwarte, ist, wenn ich auf Test klicke, er zeigt die "Hallo Welt". Danach, wenn ich die „Hallo Welt“ klicken, sollte es „Test # 2“

Jeder Vorschlag zeigen, ist sehr hilfreich ...

Danke.

Answer 1

Wie Hobodave sagt, hat dies nichts mit Ajax zu tun.

Das Problem ist, dass die click() - Funktionen an den HTML-Code angehängt werden, wenn das Dokument geladen wird (auf DOM-fähig). Zu diesem Zeitpunkt existiert das Hello World Div noch nicht. Wenn es erstellt wird, hat es kein Klickereignis.

Sie müssen entweder das click() hinzufügen, wenn das neue div hinzugefügt wird, oder alternativ die live() Funktion verwenden, um Ihre Ereignishandler anzuhängen.

$(document).ready(function() { 
    $('#test').live('click',function() { 
    $('#result').html('<a href="#" id="hello">hello world</a>'); 
    }); 

    $('#hello').live('click',function() { 
    $('#result').html('<a href="#" id="asdf">Test #2</a>'); 
    }); 
}); 

Das heißt, eine noch einfachere Methode für die Funktionen, die Sie wollen, ist nur hide() und show() auf zwei bereits bestehende divs zu verwenden.

Answer 2

Zuerst hat Ihre Frage nichts mit AJAX zu tun. Das ist reines Javascript. Die onClick-Listener, die Sie oben definieren, sind beim Laden der Seite an die entsprechenden Elemente gebunden (insbesondere an das Ereignis DOM Ready). Wenn die Seite geladen wird, gibt es kein Element mit id = "Hallo", daher wird der Listener nicht daran gebunden.

Was Sie tun müssen, ist Nest der Hörer für id = „Hallo“ innerhalb der Klickereignisbindung für id = „Ergebnis“

z.B.

$(document).ready(function() { 
    $('#test').click(function() { 
    $('#result').html('<a href="#" id="hello">hello world</a>'); 
    $('#hello').click(function() { 
     $('#result').html('<a href="#" id="asdf">Test #2</a>'); 
    }); 
    }); 
}); 

Answer 3

Es ist, weil der Click-Ereignishandler für das Element mit id="hello", dass Sie bereit in Dokument einrichten nicht an das Element gebunden bekommen, da es nicht bis zum Elemente im DOM existiert mit id="test" geklickt wird.

Eine Möglichkeit, dies zu beheben, wäre die Ereignisdelegierung und der Befehl live().

Eine andere Möglichkeit wäre, den Click-Ereignishandler gleichzeitig mit dem Hinzufügen des Elements zum DOM zu definieren. Im Folgenden wird in diesem Szenario

$(function() { 
    $('#test').click(function() { 
    $('#result') 
     .html('<a href="#" id="hello">hello world</a>'); 
     $('#hello').click(function() { 
      $('#result').html('<a href="#" id="asdf">Test #2</a>'); 
      // to prevent event propagation 
      return false; 
     }); 
    // to prevent event propagation 
    return false;  
    });  
}); 

Es gibt bestimmte jQuery-Befehle zum Anhängen von Elementen an andere Elemente funktionieren, diejenigen, die in diesem Szenario funktionieren würde sind append() und appendTo(). Dies ist ein Beispiel mit appendTo()

$(function() { 
    $('#test').click(function() { 

    $('<a href="#" id="hello">hello world</a>') 
     .click(function() { 
      $(this).replaceWith('<a href="#" id="asdf">Test #2</a>') 
     }) 
     .appendTo('#result'); 
    }); 
});