jQuery evento click no funciona cuando el contenido se sobrescribe el uso de AJAX

Question

he explicado el problema debajo de este código

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

Hay una parte de contenido dentro de un div que tiene 'contenido' como su ID Dentro de esa i tener una ayuda div. Cuál es display: none pordefecto y si el usuario hace clic en el botón de ayuda que hago un

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

y cuando el usuario hace clic en el mismo botón de ayuda o si el usuario hace clic en el interior del div ayuda entonces que hago este código para ocultar ese div $ ('# help'). hide (500)

Esto está funcionando bien hasta que haga una solicitud ajax para actualizar el contenido de div id = 'content' Estoy sobreescribiendo el mismo div de ayuda con el mismo contenido. es como si estuviera sobrescribiendo todo el área de contenido excepto el encabezado y el pie de página.

pero después de actualizarlo con el texto de respuesta al evento de clic en la parte superior del código que está dentro del document.ready no está funcionando como onclick donde está trabajando en eso div

quiero decir que está funcionando bien. sin eso al hacer clic y con ese código listo para el documento anterior no funciona cuando se sobrescribe desde ajax.

Según mi experiencia, el código JavaScript o los enlaces no funcionan cuando un código con scripts de script y etiquetas de scripts se extraen dinámicamente y se actualizan con ajax.

Ahora estoy usando onclick en lugar de ese documento listo para ocultar y mostrar la ayuda div.

y sobre todo

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

lo que parece que tiene que actualizar todos los eventos adjuntos al actualizar usando ajax.

Por favor, envíe sus comentarios y sugerencias para superar esto.

Answer 1

intente utilizar .live().

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

.live (eventType, handler)

partir de la versión 1.9, .live() ha dejado de utilizarse.

A continuación, puede utilizar http://api.jquery.com/delegate/

Adjuntar un controlador al evento para todos los elementos que coinciden con el selector actual , ahora o en el futuro.

Answer 2

Probar:

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

en lugar de:

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

Answer 3

vivo es obsoleto. Debe usar en.

$ (document) .en ("clic", "selector", function() {

es el formato en vivo/delegado del sobre.

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

Answer 4

Y realmente ahora funciona como se esperaba:.

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