Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Wesley Balestrini

Como usar o .on() do jquery?

Recommended Posts

Olá pessoal!

 

Pesquisei muito sobre isso, mas não achei um tutorial que me ajudasse de vez no assunto. Até achei alguns tópicos aqui no fórum, mas não entendi muito (ainda não domino muito jquery).

 

Seguinte, como exemplo, eu tenho uma <section id="content"> que carrega dados via $.ajax().

 

digamos que eu carrega-se a <div class="teste">Teste</div> dinâmicamente (ajax), como eu posso estar formatando a cor do texto?

 

Normalmente eu usaria:

 

$(document).ready(function(){
   $(".teste").css("color","#FF0000");//muda a cor do texto para vermelho
});

 

->Como eu faço a mesma coisa usando .on(); ?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Desculpe-me, mas acho que não expliquei muito bem o meu problema.

 

Fazer a requisição ajax eu sei, o problema é manipular os dados que chegam através dele. como teste, irei fazer uma requisição, onde a tag <div class="teste">Teste</div> será carregada dentro da tag <section id="content"></section>.

 

Como eu posso, a titulo de exemplo, manipular a cor do texto do elemento cuja class é igual a teste?

 

Entenda que, seu eu usar meu o código proposto acima, apenas classes testes que já estão no documento irão ser formatadas, mas as que chegam dinamicamente (pelo ajax) não são. Pois ao fazer $(document).ready(function()), e carregar todos os elementos DOMs da página (corrija-me se eu estiver enganado), a <div class="teste">Teste</div> não existia.

 

A solução proposta por vários sites (inclusive o jquery.com), é o uso do .live() (desapreciado a partir da versão 1.7) ou o .on().

 

Então, como eu uso o .on() ?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Você explicou bem seu problema, mas aparentemente você não entendeu meu exemplo (que sim, foi péssimo e sem explicação UAEHUEAHEUA).

 

O .on não é necessário. Basta usar o .done() do próprio ajax.

$.ajax({
    url: "test.html",
    context: document.body
}).done(function () {
  // isso aqui é executado assim que a requisição ajax termina (isto é, assim que o novo html foi injetado na tela)
     $(".teste").css("color","#FF0000");  
});

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

sim, deu certo! Muito obrigado pela ajuda!

 

Mas... irei carregar muitos scripts.

 

Alguns deles:

  • Jquery-ui;
  • custom-ui;
  • jquery-data tables;
  • outros scripts;

Acredito que por questões de otimização, eu não devo carregar duas vezes estes códigos. Qual seria sua solução?

Compartilhar este post


Link para o post
Compartilhar em outros sites

sim, deu certo! Muito obrigado pela ajuda!

 

Mas... irei carregar muitos scripts.

 

Alguns deles:

  • Jquery-ui;
  • custom-ui;
  • jquery-data tables;
  • outros scripts;

Acredito que por questões de otimização, eu não devo carregar duas vezes estes códigos. Qual seria sua solução?

 

Recomendo que você deixe todos os scripts na página principal (aonde estão os ajaxs que estão chamando as outras páginas).

Compartilhar este post


Link para o post
Compartilhar em outros sites

Estou disponibilizando um exemplo que montei; nele é carregado uma tabela manipulada com o plugin data tables;

 

Ao clicar no link carregar, outra tabela idêntica é carregada, porém não recebe a formatação pelo mesmo problema que propus neste tópico.

 

Como vocês solucionariam isso?

 

Quem puder baixar o arquivo e testar, eu agradeceria muito!

 

Link para o skydrive: http://sdrv.ms/1dY6LFO

Compartilhar este post


Link para o post
Compartilhar em outros sites

Que tal usar exatamente a mesma abordagem? =\

O problema é o seguinte: eu posso no final do ajax colocar como você disse:

}).done(function(){
   oTable = $('#example').dataTable({
      "bJQueryUI": true,
      "sPaginationType": "full_numbers"
});

da certo, porém, estarei repetindo o código . Como eu evito isso?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Usando funções, talvez? lol.

Mas você vai ter problemas com o ID da tabela, que vai repetir já que o ID que vem do ajax é o mesmo que já existe na tela.
Segue uma sugestão de solução:

 

function executaCoisas(idTabela) {
    oTable = $('#' + example).dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers"
    });;
    $(".teste").css("color", "#F00");
}


$(document).ready(function () {


    executaCoisas('example');


    $("#enviar").click(function (event) {
        event.preventDefault();
        $.ajax({
            url: $(this).attr("href"),
            type: 'post',
            dataType: 'html',
            beforeSend: function () {
                $("#resposta").html("<center style='width:100px'><img src='ajax-loader.gif' width='16' height='16' alt='Carregando' title='Carregando'/><br/>Carregando</center>");
            },
            timeout: 3000,
            success: function (retorno) {
                $('#resposta').html(retorno);
            },
            error: function (erro) {
                $('#resposta').html(erro);
            }
        }).done(function () {
            executaCoisas('outroId');
        });
    })
})

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Fiz assim:

 

<script type="text/javascript">
function table(id){
   oTable = $('#' + id).dataTable({ //fiz um pequena correção (troquei example por id)
      "bJQueryUI": true,
      "sPaginationType": "full_numbers"
   });
}

$(document).ready(function(){		
	table('example1');					   
	
	$("#enviar").click(function(event) {
		event.preventDefault();
		$.ajax({
			url : $(this).attr("href"),
			type : 'post',
			dataType: 'html',
			beforeSend: function(){
			  $("#resposta").html("<center style='width:100px'><img src='ajax-loader.gif' width='16' height='16' alt='Carregando' title='Carregando'/><br/>Carregando</center>"); 
			},
			timeout: 3000,    
			success: function(retorno){
			  $('#resposta').html(retorno);
			},
			error: function(erro){
			  $('#resposta').html(erro);
			}       
		}).done(function(){
			table('example2');
			
		});
	})
})
</script>

Agora sim! Deu certo! Muito obrigado, e desculpe-me pela falta de conhecimento. Sou um iniciante querendo fazer coisas complexas suashaush.

 

vou marca sua resposta como correta, e se você puder fazer a correção lá no parâmetro da função. Pois se outro visitarem o tópico não irão se confundir.

 

Obrigado novamente!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Aparentemente não posso editar um post que foi marcado como resposta. Fazer o que lol. Que bom que resolveu =)

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.