Esta es el arreglo más completa que encomtrarás brindar, sin embargo estúdiala pausadamente y valora si es compatible a tu proyecto.
Solución:
Los selectores de jQuery seleccionan elementos coincidentes que existen en el DOM cuando se ejecuta el código y no se actualizan dinámicamente. Cuando llamas a una función, como .hover() para agregar controladores de eventos, solo los agrega a esos elementos. Cuando realiza una llamada AJAX y reemplaza una sección de su página, está eliminando esos elementos con los controladores de eventos vinculados a ellos y reemplazándolos con nuevos elementos. Incluso si esos elementos ahora coincidieran con ese selector, no obtienen el controlador de eventos vinculado porque el código para hacerlo ya se ejecutó.
Controladores de eventos
Específicamente para controladores de eventos (es decir, .click()) puede usar la delegación de eventos para evitar esto. El principio básico es vincular un controlador de eventos a un static (existe cuando se carga la página, nunca se reemplaza) elemento que contendrá todo su contenido dinámico (AJAX cargado). Puede leer más sobre la delegación de eventos en la documentación de jQuery.
Para tu click controlador de eventos, 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 a todo el documento (por lo que nunca se eliminará hasta que se descargue la página), que reaccionará a click eventos en un elemento con el id propiedad de click. Idealmente, usaría algo más cercano a sus elementos dinámicos en el DOM (quizás un
El problema surge cuando necesitas manejar .hover(), aunque. no hay real hover evento en JavaScript, jQuery solo proporciona esa función como una abreviatura conveniente para vincular los controladores de eventos al mouseenter y mouseleave eventos. Sin embargo, puede utilizar 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 de jQuery
Eso cubre los enlaces del controlador de eventos. Sin embargo, eso no es todo lo que estás haciendo. También inicializa un complemento jQuery (caja de colores), y no hay forma de delegar eso a los elementos. Vas a tener que simplemente llamar a esas líneas nuevamente cuando hayas cargado tu contenido AJAX; la forma más sencilla sería moverlos a una función con nombre separada que luego puede llamar en ambos lugares (en la carga de la página y en sus solicitudes AJAX success llamar de vuelta):
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');
);
Tuve el mismo problema antes de poder encontrar la solución que funcionó para mí. Entonces, si alguien en el futuro puede intentarlo y decirme si fue correcto, ya que todas las soluciones que pude encontrar fueron un poco más complicadas que esto.
Entonces, como dijo Tamer Durgun, también colocaremos su código dentro de ajaxStop, por lo que su código se restablecerá cada vez que ajax complete cualquier evento.
$( document ).ajaxStop(function()
//your code
Trabajó para mi 🙂
// 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'
);
Si estás contento con lo expuesto, tienes la habilidad dejar una noticia acerca de qué le añadirías a este post.