Delegating events to dynamically generated elements

Question

Delegating events to dynamically generated elements

Navigation

#1 by (2 votes)

3

I'll try to be more specific. I have a <ul> list that is populated 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>');
    })
  }
});

Because the items in my list are not in the html, I can not manipulate them ... For example, I need to sort my list according to the value attribute of <li> tags, and I also need to have one loadMore button to limit the amount of elements that appear on the screen. I already have this, the problem is that I can not manipulate the items in my " <li> " list that are being inserted dynamically, so to speak, from my local json file.

I will show the functions for sorting and loadMore that I have with me.

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

Thanks Gurizada, a big hug and a great weekend everyone!

html jquery json

asked by anonymous 04.06.2016 / 16:29

1 answer

Doubts with timessquare CalendarPickerView Laravel - validate input arrays and return values in case of error

score 2 · Accepted Answer

Delegates the event to the parent element, to an element where the event can be associated with the page loading. Instead of delegating to the specific element that does not yet exist. To delegate events to dynamically generated elements, in this case, the li within #lista-resultados-pesquisa does so:

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

I've done a EXAMPLE , as it works, uncomment the event click below, and take the top to see that delegating the event directly on the element does not work

$('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><ulid="lista-resultados-pesquisa">

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