Question

My html:

<div style="top:10px;display:block" class="jPlugin_article_pager">
    <span style="cursor:pointer" class="jPlugin_article_page" data-id="1">1</span>
    <span style="cursor:pointer" class="jPlugin_article_page" data-id="2">2</span>
</div>

My jquery

  $('.jPlugin_article_pager').on('click','.jPlugin_article_page',function(event){
            alert('works');
                console.log($(this).attr('data-id') + ' was pressed. Details:  Event target : '+ event.target+ '. Type:' + event.type );
});

I just want the alert to be triggered when you click teh jPlugin_article_page element.
Note. jPlugin_article_pager is generated dynamically and so jPlugin_article_page. I dont need to use document ready function cause my code is near the closing body tag..

I would like to know what is wrong..thanks

UPDATE:

weirdly enough.. i dont know what i changed but this works:

    $('.jPlugin_article_pager').on('click','.jPlugin_article_page',function(event){
                 alert($(this).attr('data-id'));
                console.log($(this).attr('data-id') + ' was pressed. Details:  Event target : '+ event.target+ '. Type:' + event.type );
            });

Answer 1

as .jPlugin_article_pager is created dynamically you should delegate the event from another static parent like body tag, try this:

$('body').on('click', '.jPlugin_article_page', function(event){
    alert('works');
    console.log($(this).attr('data-id') + ' was pressed. Details:  Event target : '+ event.target+ '. Type:' + event.type );
});