Trigger $ document.ready (então o código AJAX que não posso modificar é executado)

Meus requisitos são os seguintes:

  • Eu tenho uma página rica que em um determinado momento carrega um monte de HTML em um div , via AJAX.
  • O HTML que eu recupero tem javascript ( ... )
  • O javascript recuperado contém partes $('document').ready( ... )
  • Eu não posso modificar o javascript recuperado; vem de uma biblioteca externa
  • Eu tenho uma function javascript que é chamada quando o AJAX é carregado. Eu estou tentando “enganar” para executar fazendo:

     function AjaxLoaded() { $('document').trigger('ready'); } 

Isso não me parece, receio.

Eu vi várias respostas no Stack Overflow que “evitam” essa questão, alterando o código que é retornado no AJAX (torne-o uma function e chame-o após o carregamento ou apenas remova o $(document).ready() ). Preciso salientar que não posso alterar o código recuperado neste caso.

Após algumas pesquisas, criei uma maneira de fazê-lo funcionar.

aqui está o meu teste que mostra que funciona: http://www.antiyes.com/test/test2.php

aqui está o código relevante:

   

então no corpo eu tenho:

  

basicamente o que eu fiz foi adicionar uma function ao jQuery que copia o readyList antes que ele seja limpo, então ele estará disponível para ser usado por você.

parece que o código abaixo não funciona:

 function AjaxLoaded() { $(document).trigger('ready'); } 

Solte as aspas ao redor do document .

Como o readyList do jQuery não é exposto a partir da versão 1.4 (discutida aqui ), as boas soluções acima estão quebradas.

Uma maneira de contornar isso é criando seu próprio readyList, através da substituição do método original pronto para jQuery. Isso precisa ser feito antes que outros scripts que usam o método pronto original sejam carregados. Caso contrário, apenas o mesmo código que John / Kikito:

 // Overrides jQuery-ready and makes it triggerable with $.triggerReady // This script needs to be included before other scripts using the jQuery-ready. // Tested with jQuery 1.7 (function(){ var readyList = []; // Store a reference to the original ready method. var originalReadyMethod = jQuery.fn.ready; // Override jQuery.fn.ready jQuery.fn.ready = function(){ if(arguments.length && arguments.length > 0 && typeof arguments[0] === 'function') { readyList.push(arguments[0]); } // Execute the original method. originalReadyMethod.apply( this, arguments ); }; // Used to trigger all ready events $.triggerReady = function() { $(readyList).each(function(){this();}); }; })(); 

Não tenho certeza se é aconselhável replace o método pronto. Sinta-se livre para me aconselhar sobre isso. Ainda não encontrei nenhum efeito colateral.

Apenas no caso de alguém precisar, eu refinei a solução de John um pouco para que ela pudesse ser usada diretamente como um arquivo javascript incluído.

 // jquery_trigger_ready.js // this function is added to jQuery, it allows access to the readylist // it works for jQuery 1.3.2, it might break on future versions $.getReadyList = function() { if(this.readyList != null) { this.myreadylist = [].concat(this.readyList); } return this.myreadylist; }; $(document).ready(function() { readylist = $.getReadyList(); }); $.triggerReady = function() { $(readylist).each(function(){this();}); } 

Incluir este arquivo depois de include o jquery permite o acionamento pronto invocando $.triggerReady() . Exemplo:

   trigger ready event         

By the way, eu queria fazer isso $(document).triggerReady() . Se alguém estiver disposto a compartilhar alguns conselhos sobre isso, não será apreciado.

Nós tivemos o mesmo problema e resolvemos de outra forma.

Ao invés de

 $(document).ready(function () { $('.specialClass').click(.... 

Nós costumavamos :

 $(document).bind('ready', function(event) { $('.specialClass', event.target).click(.. 

O jQuery acionará um evento “pronto” no documento como de costume. Quando carregamos o conteúdo de um novo div via ajax, podemos escrever:

 loadedDiv.trigger('ready') 

E ter toda a boot realizada apenas no div, obtendo o que se espera.

A resposta de Simone Gianni Acho que é a mais elegante e limpa.

e você ainda pode simplificá-lo para se tornar ainda mais fácil de usar:

 jQuery.fn.loadExtended = function(url,completeCallback){ return this.load(url,function(responseText, textStatus, XMLHttpRequest) { if (completeCallback !== undefined && completeCallback !== null) { completeCallback(responseText, textStatus, XMLHttpRequest); } $(this).trigger("ready"); }); }; 

Então, agora, em vez de usar:

 $(".container").load(url,function(responseText, textStatus, XMLHttpRequest) { $(this).trigger("ready"); }); 

você pode simplesmente usar:

 $(".container").loadExtended("tag_cloud.html"); 

ou:

 $(".container").loadExtended("tag_cloud.html",function(){ alert('callback function') }); 

Isso tem a vantagem de aplicar apenas o acionador no div que está sendo atualizado.