JQuery is not getting fired when is constructed programmatically

Question

Please have a look at my JavaScript

<script>
            function dynamicMessageLoader(id) {

                $.get("SentMessagesDynamicLoaderServlet?idMessageGroup=" + id, function (responseJson) {

                    $('#li_list').empty();
                    var array = [];

                    $.each(responseJson, function (index, item)

                    {
                        array[index] = item;
                    });

                    $('#message_count').empty();

                    var readArray = array.length;
                    var count = readArray + " Messages Selected";
                    $('<p />', {html: count}).appendTo('#message_count');

                    for (var i = 0; i < readArray; i++) {

                        //$('<li />', {html: array[i][1]}).appendTo('#li_list');
                        $('<li>', { 'class': 'clickable-row hand', id: array[i][0], html: array[i][1]}).appendTo('#li_list');

                    }
                });
            }
        </script>

Now the associated HTML

<ul id="li_list">
<li class='clickable-row hand' id="12" >text</li>                                  
</ul>

What happens is that when the above JavaScript code gets called, it adds <li> elements to li_list. As you can see, I have already hard coded one <li> element there as well.

Now when the <li> element is called, the below Jquery code needs to be executed.

<script>

            jQuery(function () {
                $('.clickable-row').click(function () {


                    var $this = $(this),
                            id = this.id;

                    //alert(id);

                    $.get("MessagesDynamicPopupServlet?idMessage=" + id, function (responseJson) {

                        var array = [];

                        $.each(responseJson, function (index, item)

                        {
                            array[index] = item;
                        });
                        var image = array[3];

                        $('#idMessage').val(array[0]);
                        $('#idMessageGroup').val(array[1]);
                        $('#message').val(array[2]);

                        $('#blah').attr("src", image);

                        $('#videoURL').val(array[4]);
                    });
                });
            });

        </script>   

Now the thing is, the above Jquery code gets called only for the hard coded <li>. It never gets called for the <li> element I added via the JavaScript.

How can I fix this?

Answer 1

Just use the Delegated events , for the newly created elements . so here you'll attach an event to a parent (document in this case ) , that will be fired for all it's descendants ( second params in the .on function ) which will be the .clickable-row class in your case .

It wont work for $('.clickable-row').click because this last is attached to only existing dom node at the moment of the event assignment ( so newly created wont be attached to this click ).

See below code :

$(document).on("click", '.clickable-row', function() {


  var $this = $(this),
    id = this.id;

  //alert(id);

  $.get("MessagesDynamicPopupServlet?idMessage=" + id, function(responseJson) {

    var array = [];

    $.each(responseJson, function(index, item)

      {
        array[index] = item;
      });
    var image = array[3];

    $('#idMessage').val(array[0]);
    $('#idMessageGroup').val(array[1]);
    $('#message').val(array[2]);

    $('#blah').attr("src", image);

    $('#videoURL').val(array[4]);
  });
});