jquery-Klick-Ereignis funktioniert nicht, wenn der Inhalt mit Ajax überschrieben wird

Question

Ich habe das Problem unter diesem Code erklärt

<div id='content'>

<div id='help'>
blah blah blah
once there lived a king named midas
blah blah blah
</div>

<script>
$(document).ready(function() {
    $('#help').click( function () {
          $('help').hide(500);
     })
})
</script>

<!-- bottom of the page after a long other content -->
</div>
<!-- end of div id= content -->

<script>
function ondelete()
{
// doing an ajax request to after deleting some items to dynamically update a list.
// the result will also have the same above div code with that help div
   document.getElementById('content').innerHTML = xmlHTTP.responseText
}
</script>

Es gibt einen Inhalt Teil innerhalb eines div, die "Inhalt" als seine id hat Innerhalb davon habe ich ein Hilfe-Div. Welches display:none bydefault ist und wenn der Benutzer auf den Hilfe-Button klickt, mache ich eine

$('#help').show(500);

und wenn der Benutzer die gleiche Hilfe-Schaltfläche klickt oder wenn der Benutzer innerhalb der Hilfe-Div klickt, dann tue ich diesen Code zu verstecken, dass div $('#help').hide(500)

Dies funktioniert gut, bis ich eine Ajax-Anfrage, um den Inhalt der div id='content' aktualisieren tun Ich überschreibe das gleiche Hilfe-Div mit dem gleichen Inhalt. Es ist, als würde ich den gesamten Inhaltsbereich mit Ausnahme der Kopf- und Fußzeile.

aber nach der Aktualisierung mit der Antwort Text der Klick-Ereignis an der Spitze des Codes, die innerhalb der document.ready ist nicht funktioniert, wo als onclick ist auf diesem div arbeiten

Ich meine, es funktioniert gut. ohne, dass auf Klick und mit, dass oben Dokument bereit Code ist es nicht funktioniert, wenn von Ajax überschrieben.

Meiner Erfahrung nach funktioniert Javascript-Code oder Links nicht, wenn ein Code mit Script-SRC-Tags und Script-Tags dynamisch abgerufen und mit Ajax aktualisiert werden.

Jetzt verwende ich onclick anstelle dieses Dokuments, um das Hilfe-Div ein- und auszublenden.

und vor allem

when there is a overwrite from ajax if you again set
$(#'help').click = .... code
this works.

like 
function ondelete()
{
   document.getElementById('content').innerHTML = xmlHTTP.responseText
   $('#help').click (function() { $('#help').hide(500); });
}

Es scheint also, dass Sie alle angehängten Ereignisse aktualisieren müssen, wenn Sie sie mit Ajax aktualisieren.

Bitte geben Sie Ihre Kommentare und Vorschläge zur Lösung dieses Problems ab.

Answer 1

Versuchen Sie es mit .live() .

$(document).ready(function() {
    $('#help').live('click', function () {
          $(this).hide(500);
     });
});

.live( eventType, handler )

ab Version 1.9 ist .live() veraltet.

Sie können dann http://api.jquery.com/delegate/

Hängen Sie einen Handler an das Ereignis für alle Elemente, die mit dem aktuellen Selektor passen, jetzt oder in Zukunft.

Answer 2

Versuchen Sie es:

$('#help').live('click', function() { 
    // ...
});

anstelle von:

$('#help').click(function() { 
    // ...
});

Answer 3

Live ist veraltet. Sie sollten verwenden auf .

$(document).on("click", "selector", function () {

ist das live/delegierte Format von on.

http://api.jquery.com/live/

Answer 4

Und es funktioniert jetzt wirklich wie erwartet:

$(document).on("click","#id_of_anything_div_input_button_etc", function () {
old_body_of_functon_called_right_here(); });

function old_body_of_functon_called_right_here() { /* ... */}