una - jQuery no funciona después de que el contenido se carga a través de AJAX

highcharts update data

Question

En esta página tengo una ventana emergente jQuery e imágenes de tamaño variable en miniatura. Si paso el mouse sobre las imágenes en miniatura, las imágenes cambian de tamaño perfectamente. Además, cuando hago clic en el botón amarillo grande TV "QuickBook TV" en el pie de página, la ventana emergente aparece perfectamente como yo quiero.

Sin embargo, cuando hago clic en los botones "Siguiente" o "Anterior", AJAX se usa para cargar el contenido nuevo y mi jQuery ya no funciona para las imágenes emergentes o de imágenes en miniatura. He buscado en varios foros buscando información sobre este tema, pero debido a mi limitado conocimiento de jQuery, no he podido entender lo que debo hacer.

Lo que sigue es el jQuery emergente

$(document).ready(function() {
$(".iframe").colorbox({ iframe: true, width: "1000px", height: "500px" });
$(".inline").colorbox({ inline: true, width: "50%" });
$(".callbacks").colorbox({
onOpen: function() { alert(''onOpen: colorbox is about to open''); },
onLoad: function() { alert(''onLoad: colorbox has started to load the targeted content''); },
onComplete: function() { alert(''onComplete: colorbox has displayed the loaded content''); },
onCleanup: function() { alert(''onCleanup: colorbox has begun the close process''); },
onClosed: function() { alert(''onClosed: colorbox has completely closed''); }
});
//Example of preserving a JavaScript event for inline calls.
$("#click").click(function() {
$(''#click'').css({ "background-color": "#f00", "color": "#fff", "cursor": "inherit" }).text("Open this window again and this message will still be here.");
return false;
});
});

Y estas son las miniaturas jQuery

$(function() {
var xwidth = ($(''.image-popout img'').width())/1;
var xheight = ($(''.image-popout img'').height())/1;
$(''.image-popout img'').css(
{''width'': xwidth, ''height'': xheight}
); //By default set the width and height of the image.
$(''.image-popout img'').parent().css(
{''width'': xwidth, ''height'': xheight}
);
$(''.image-popout img'').hover(
function() {
$(this).stop().animate( {
width : xwidth * 3,
height : xheight * 3,
margin : -(xwidth/3)
}, 200
); //END FUNCTION
$(this).addClass(''image-popout-shadow'');
}, //END HOVER IN
function() {
$(this).stop().animate( {
width : xwidth,
height : xheight,
margin : 0
}, 200, function() {
$(this).removeClass(''image-popout-shadow'');
}); //END FUNCTION
}
);
});

Answer 1

Los selectores jQuery seleccionan elementos coincidentes que existen en el DOM cuando se ejecuta el código y no se actualizan dinámicamente. Cuando llama a una función, como .hover() para agregar controladores de eventos, solo los agrega a esos elementos. Cuando haces una llamada AJAX y reemplazas una sección de tu página, estás eliminando esos elementos con los manejadores de eventos vinculados a ellos y reemplazándolos con elementos nuevos. Incluso si esos elementos ahora coinciden con ese selector, no obtienen el controlador de eventos vinculado porque el código para hacer eso ya se ha ejecutado.

Manejadores de eventos

Específicamente para los manejadores de eventos (es decir, .click() ) puede usar la delegación de eventos para evitar esto. El principio básico es que vincula un controlador de eventos a un elemento estático (existe cuando la página carga, nunca se reemplaza) que contendrá todo su contenido dinámico (cargado con AJAX). Puede leer más sobre la delegación de eventos en la documentación de jQuery .

Para su controlador de evento click , el código actualizado se vería así:

$(document).on(''click'', "#click", function () {
$(''#click'').css({
"background-color": "#f00",
"color": "#fff",
"cursor": "inherit"
}).text("Open this window again and this message will still be here.");
return false;
});

Eso vincularía un controlador de eventos al documento completo (por lo que nunca se eliminará hasta que la página se descargue), que reaccionará ante los eventos de click en un elemento con la propiedad id de click . Idealmente, usaría algo más cercano a sus elementos dinámicos en el DOM (tal vez un <div> en su página que siempre está allí y que contenga todo el contenido de su página), ya que eso mejorará un poco la eficiencia.

El problema viene cuando necesitas manejar .hover() , sin embargo. No existe un evento de hover real en JavaScript, jQuery solo proporciona esa función como una forma abreviada de vincular los manejadores de eventos al mouseenter y a los eventos de mouseleave . Sin embargo, puedes usar la delegación de eventos:

$(document).on({
mouseenter: function () {
$(this).stop().animate({
width: xwidth * 3,
height: xheight * 3,
margin: -(xwidth / 3)
}, 200); //END FUNCTION
$(this).addClass(''image-popout-shadow'');
},
mouseleave: function () {
$(this).stop().animate({
width: xwidth,
height: xheight,
margin: 0
}, 200, function () {
$(this).removeClass(''image-popout-shadow'');
}); //END FUNCTION
}
}, ''.image-popout img'');

Complementos jQuery

Eso cubre las asociaciones del controlador de eventos. Sin embargo, eso no es todo lo que estás haciendo. También inicializa un complemento jQuery (colorbox) y no hay forma de delegarlos en elementos. Tendrás que simplemente volver a llamar a esas líneas cuando hayas cargado tu contenido AJAX; la forma más simple sería moverlos a una función nombrada separada a la que luego pueda llamar en ambos lugares (en la carga de la página y en la devolución de llamada success solicitudes AJAX):

function initialiseColorbox() {
$(".iframe").colorbox({
iframe: true,
width: "1000px",
height: "500px"
});
$(".inline").colorbox({
inline: true,
width: "50%"
});
$(".callbacks").colorbox({
onOpen: function () {
alert(''onOpen: colorbox is about to open'');
},
onLoad: function () {
alert(''onLoad: colorbox has started to load the targeted content'');
},
onComplete: function () {
alert(''onComplete: colorbox has displayed the loaded content'');
},
onCleanup: function () {
alert(''onCleanup: colorbox has begun the close process'');
},
onClosed: function () {
alert(''onClosed: colorbox has completely closed'');
}
});
}

Answer 2

Puede usar la función completa de jQuery ajax después de recuperar el formulario de datos en algún lugar, verá los elementos actualizados después de completar ajax

Answer 3

Sus controladores de eventos se pierden cuando reemplaza el contenido. Cuando configura eventos de desplazamiento, jQuery los configura en los eventos en la página actualmente. Entonces cuando los reemplaza con ajax, los eventos no están asociados con esos elementos porque son nuevos.

Para solucionarlo, puede llamar a la función que los vincula nuevamente o puede establecer el controlador de eventos en el documento como en esta answer usando $ (documento) .on

De esta forma, el evento se establece en el documento y los elementos nuevos recibirán el evento.

Answer 4

Tuve el mismo problema antes de poder encontrar la solución que funcionó para mí. Entonces, si alguien en el futuro puede intentarlo, avíseme si fue correcto, ya que todas las soluciones que pude encontrar fueron un poco más complicadas.

Como dijo Tamer Durgun, también colocaremos su código dentro de ajaxStop, por lo que su código se restablecerá cada vez que se complete un evento con ajax.

$( document ).ajaxStop(function() {
//your code
}

Trabajó para mi :)

Answer 5

Usted puede usar el método delegate() jQuery, que asocia un controlador a uno o más eventos para todos los elementos que coinciden con el selector, ahora o en el futuro, en función de un conjunto específico de elementos raíz. En mi caso, funciona como se esperaba

este $(selector).click(function(e){}

conviértase en esto después de usar el método delegate()

$( "body" ).delegate( "selector", "click", function(e) {}

Espero que esto ayude;)

Answer 6

 // EXAMPLE FOR JQUERY AJAX COMPLETE FUNC.
$.ajax({
// get a form template first
url: "../FPFU/templates/yeni-workout-form.html",
type: "get",
success: function(data){
// insert this template into your container
$(".content").html(data);
},
error: function(){
alert_fail.removeClass("gizle");
alert_fail.addClass("goster");
alert_fail.html("Template getirilemedi.");
},
complete: function(){
// after all done you can manupulate here your new content
// tinymce yükleme
tinymce.init({
selector: ''#workout-aciklama''
});
}