jQuery não funciona depois que o conteúdo é carregado via AJAX

Nesta página eu tenho uma janela popup jQuery e imagens redimensionáveis ​​em miniatura. Se eu passar o mouse sobre as miniaturas, as imagens serão redimensionadas perfeitamente. Além disso, quando clico no grande botão amarelo TV “QuickBook TV” no rodapé, o pop-up aparece perfeitamente como eu quero.

No entanto, quando clico nos botões “Next” ou “Prev”, o AJAX é usado para carregar o novo conteúdo e o meu jQuery não funciona mais para as imagens pop-up ou em miniatura. Eu pesquisei em vários fóruns procurando informações sobre esse problema, mas devido a ter um conhecimento limitado de jQuery, não consegui entender o que preciso fazer.

A seguir está o popup jQuery

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

E isso é o thumbnails 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 } ); }); 

Os seletores do jQuery selecionam elementos correspondentes que existem no DOM quando o código é executado e não são atualizados dinamicamente. Quando você chama uma function, como .hover() para adicionar manipuladores de events, ela só os adiciona a esses elementos. Quando você faz uma chamada AJAX e substitui uma seção da sua página, você está removendo esses elementos com os manipuladores de events ligados a eles e substituindo-os por novos elementos. Mesmo se esses elementos agora corresponderem a esse seletor, eles não receberão o limite do manipulador de events porque o código para fazer isso já foi executado.

Manipuladores de events

Especificamente para manipuladores de events (ou seja, .click() ), você pode usar a delegação de events para contornar isso. O princípio básico é que você liga um manipulador de events a um elemento estático (existe quando a página é carregada, e nunca é substituído) que conterá todo o seu conteúdo dynamic (carregado em AJAX). Você pode ler mais sobre a delegação de events na documentação do jQuery .

Para o manipulador de events de click , o código atualizado ficaria assim:

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

Isso vincularia um manipulador de events ao documento inteiro (portanto, nunca será removido até que a página seja descarregada), o que reagirá aos events de click em um elemento com a propriedade id de click . Idealmente, você usaria algo mais próximo de seus elementos dynamics no DOM (talvez um

na sua página que esteja sempre lá e contenha todo o conteúdo da sua página), pois isso aumentará um pouco a eficiência.

O problema surge quando você precisa manipular .hover() . Não há nenhum evento hover real em JavaScript, o jQuery apenas fornece essa function como uma abreviação conveniente para manipuladores de events de binding para os events mouseenter e mouseleave . Você pode, no entanto, usar a delegação de evento:

 $(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'); 

plugins jQuery

Isso abrange as ligações do manipulador de events. No entanto, isso não é tudo o que você está fazendo. Você também inicializa um plugin jQuery (colorbox), e não há como delegá-los aos elementos. Você precisará simplesmente chamar essas linhas novamente quando tiver carregado seu conteúdo AJAX; A maneira mais simples seria movê-los para uma function nomeada separada que você poderia chamar em ambos os lugares (no carregamento da página e no callback de success pedidos do 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'); } }); } 

Tive o mesmo problema antes de conseguir encontrar a solução que funcionou para mim. Então, se alguém no futuro puder me dar uma chance e me avisar se estava certo, já que todas as soluções que consegui encontrar foram um pouco mais complicadas do que isso.

Então, como dito por Tamer Durgun, nós também colocaremos seu código dentro de ajaxStop, então seu código será restabelecido toda vez que qualquer evento for completado por ajax.

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

Trabalhou para mim 🙂

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

Seus manipuladores de events estão sendo perdidos quando você substitui o conteúdo. Quando você define seus events instantâneos, o jQuery os está definindo nos events da página atualmente. Portanto, quando você os substitui por ajax, os events não são associados a esses elementos porque são novos.

Para corrigir isso, você pode chamar a function que os liga novamente ou, em vez disso, você pode definir o manipulador de events no documento, como nesta resposta, usando $ (document) .on

Dessa forma, o evento é definido no documento e todos os novos elementos receberão o evento chamado.

Você pode usar a function completa do jQuery ajax depois de recuperar o formulário de dados em algum lugar, ele verá elementos atualizados após a conclusão do ajax

You Can User O método delegate () do jQuery que Anexa um manipulador a um ou mais events para todos os elementos que correspondem ao seletor, agora ou no futuro, com base em um conjunto específico de elementos raiz. No meu caso, ele está funcionando como esperado

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

tornar-se isto depois de usar o método delegate ()

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

Espero que isso ajude;)