Como usar o .on() do jquery?

[Wesley Balestrini 0]

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(); ?

[Fiote 24]

http://api.jquery.com/jquery.ajax/

 

$.ajax({
    url: "test.html",
    context: document.body
}).done(function () {
    $(this).addClass("done");
});

 

Consegue usar esse exemplo pra aplicar sua idéia?

[Wesley Balestrini 0]

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() ?

[Fiote 24]

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");  
});

 

[Wesley Balestrini 0]

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?

[William Bruno 1501]

Leia:

 

http://wbruno.com.br/ajax/usando-lightbox-em-pagina-carregada-ajax/

http://wbruno.com.br/ajax/atrelar-evento-em-elementos-nao-existiam-dom/

[Fiote 24]

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).

[Wesley Balestrini 0]

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

[Fiote 24]

Que tal usar exatamente a mesma abordagem? =\

[Wesley Balestrini 0]

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?

[Fiote 24]

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

 

[Wesley Balestrini 0]

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!

[Fiote 24]

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