3

Vou tentar ser mais específico. Possuo uma lista <ul>que é populada via jQuery:

var $imovel  = $("#lista-resultados-pesquisa");


$.ajax({
  type: 'GET',
  url: 'imovel.json',
  success: function(data) {
    $.each(data.imovel,function(i, imovel){
        $imovel.append('<li value="'+ imovel.preco +'">Meu conteudo</li>');
    })
  }
});                 

Pelo fato de os itens da minha lista não estarem no html, não consigo manipula-los... Por exemplo, preciso ordenar minha lista de acordo com o atributo value das tags <li>, e também preciso ter um botão loadMore para limitar a quantidade de elementos que aparece na tela. Ja tenho isso, o problema é que não consigo manipular os itens da minha lista "<li>" que estão sendo inseridos dinâmicamente, por assim dizer, oriundos do meu arquivo json local.

Vou mostrar as funcões para ordenação e loadMore que tenho comigo.

//LOADMORE
            var size_li = $("#lista-resultados-pesquisa .intens-pesquisa").size();
            var x=3;
            $("#lista-resultados-pesquisa .intens-pesquisa:lt("+x+")").show();
            $("#loadMore").click(function () {
                x= (x+3 <= size_li) ? x+3 : size_li;
                $("#lista-resultados-pesquisa .intens-pesquisa:lt("+x+")").show();
                if(x == size_li){
                    $("#loadMore").hide();
                }
            });     

            //ORDENA
                $('.ordena-menor').click(function() {
                  $("#lista-resultados-pesquisa .itens-pesquisa").sort(numOrdDesc).appendTo('#lista-resultados-pesquisa');
                });

                $('.ordena-maior').click(function() {
                  $("#lista-resultados-pesquisa .itens-pesquisa").sort(numOrdCres).appendTo('#lista-resultados-pesquisa');
                });


                function numOrdDesc(a, b) {
                  return ($(b).val()) < ($(a).val()) ? 1 : -1;
                }

                function numOrdCres(a, b) {
                  return ($(b).val()) > ($(a).val()) ? 1 : -1;
                }

Valeu Gurizada, um forte abraço e um ótimo final de semana a todos!

0

1 Resposta 1

2

Delega o evento ao elemento pai, a um elemento em que se consiga associar o evento logo no carregamento da página. Em vez de delegares ao elemento em especifico que ainda não existe. Para delegares eventos a elementos gerados dinamicamente, neste caso, os li dentro de #lista-resultados-pesquisa faz assim:

$("#lista-resultados-pesquisa").on('click', 'li', function(){
   ...
});

Fiz aqui um EXEMPLO, como está funciona, descomenta o evento click em baixo, e tira o de cima para veres que delegando o evento diretamente no elemento não funciona

$('button').on('click', function() {
  for(var i = 1; i <= 10; i++) {
  	$('#lista-resultados-pesquisa').append('<li>clica aqui: ' +i+ '</li>');
  }
});

// tira isto
$('#lista-resultados-pesquisa').on('click', 'li', function(){
alert('Isto resulta');
});

// e coloca isto para veres o que acontece/que não acontece
/*$('#lista-resultados-pesquisa li').click(function(){
alert('isto não resulta');
});*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="lista-resultados-pesquisa">

</ul>
<button>
adicionar elementos gerados dinamicamente
</button>

4
  • Miguel, você me ajudou muito! Muito obrigado... No caso da função de LoadMore, não estou conseguindo aplicar. Sabes como utilizar o on() ao invés de ready()? Grande abraço! Commented 5/06/2016 às 1:27
  • De nada. Qual ready? Não vejo
    – Miguel
    Commented 5/06/2016 às 2:32
  • Consegui meu caro amigo... Você foi de suma importancia para o sucesso! Obrigado! Commented 6/06/2016 às 18:50
  • De nada @JoãoSouza
    – Miguel
    Commented 6/06/2016 às 20:04

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .