jquery événement click ne fonctionne pas lorsque le contenu est écrasé à l'aide ajax

Question

je l'ai expliqué le problème ci-dessous ce code

<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> 

Il y a une partie de contenu dans une div qui a « contenu » comme son id intérieur que je avoir une aide div. Ce qui est display: none bydefault et si l'utilisateur clique sur le bouton d'aide que je fais un

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

et lorsque l'utilisateur clique sur le même bouton d'aide ou si l'utilisateur clique à l'intérieur de l'aide div puis-je faire ce code pour cacher cela div $ ('# help'). hide (500)

Cela fonctionne bien jusqu'à ce que je fais une requête ajax pour mettre à jour le contenu de div id = 'content' Je remplace le même div d'aide avec le même contenu. c'est comme si je suis en train d'écraser la totalité de la zone de contenu sauf l'en-tête et le pied de page.

mais après la mise à jour avec le texte de réponse de l'événement, cliquez en haut de code qui est à l'intérieur du document.ready ne fonctionne pas alors que onclick travaille sur cette div

je veux dire fonctionne bien. sans cela sur le clic et avec cela ci-dessus document prêt code il ne fonctionne pas lorsqu'il est écrasé à partir d'ajax. D'après mon expérience, le code javascript ou les liens ne fonctionnent pas lorsqu'un code avec des balises src et des balises de script est récupéré dynamiquement et mis à jour en utilisant ajax.

Maintenant, j'utilise onclick au lieu de ce document prêt à masquer et afficher l'aide div.

et surtout

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); }); 
} 

il semble donc que vous devez mettre à jour tous les événements attachés lorsque vous mettez à jour à l'aide ajax.

S'il vous plaît mettez vos commentaires et suggestions pour surmonter cela.

Answer 1

essayez d'utiliser .live().

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

.live (eventType, gestionnaire)

partir de la version 1.9, .live() est obsolète.

Vous pouvez ensuite utiliser http://api.jquery.com/delegate/

Joindre un gestionnaire à l'événement pour tous les éléments qui correspondent à le sélecteur courant, maintenant ou dans l'avenir.

Answer 2

Essayez:

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

au lieu de:

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

Answer 3

en direct est dépréciée. Vous devez utiliser sur.

$ (document) .on ("cliquez sur", "sélecteur", function() {

est le format en direct/délégué de sur.

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

Answer 4

Et vraiment fonctionne maintenant comme prévu.

$(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() { /* ... */}