Appgyver - JQuery on click not working for dynamically written items

Question

I am writing a single page app using appgyver (javascript). There are a number of lists that are written dynamically using javascript (following an external API call). Each list contains an item which, when clicked / pressed, I would like to fire a different js method.

  function write_a_list(some_array)
    {
        $('#some_list').html("");

        for ( indexor =0; indexor < some_array.length; indexor++)
          {
              var this_option_div = $('<div>');
              this_option_div.addClass('item');
              this_option_div.addClass('some_list_item');
              this_option_div.html("Button: " + indexor);
              $('#some_list').append(this_option_div);
          }
    }

  $(document).on('click', '.some_list_item', function()
  {
    supersonic.logger.debug('some_list_item clicked');
    alert('some_list_item clicked');
  });

For example, an array is passed to the write_a_list function. If an item is clicked it should be detected and fire an alert. However, this behaviour isn't observed. Is there a way that this can be achieved using the jquery 'on' approach?

Answer 1

You are using this_option_div.addClass('some_list_item'); and then calling the click event on an id that may not exist.

Change it to:

$(document).on('click', '.some_list_item', function() { ... }

EDIT ////

Can you try the closest parent selector that is not dynamic instead of document?

$('.static-wrapper').on('click', '.some_list_item', function() { ... }