Question

我的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>

我的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 );
});

我只想点击某个jPlugin_article_page元素时触发警报。注意。 jPlugin_article_pager是动态生成的，所以jPlugin_article_page。我不需要使用文档就绪函数，因为我的代码靠近结束体标记。

我想知道出了什么问题。谢谢

更新：

很奇怪..我不知道我改变了什么，但这有效：

    $('.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

事件仅绑定到调用代码时实际存在的内容。您似乎确定您不需要文档就绪函数，当然，当您使用此代码时，屏幕上是否是实际的DOM元素？

你说它是动态生成的，所以我猜它不是。并且您无法将函数绑定到不存在的对象。在动态添加对象之后调用此代码，例如在实际创建对象的同一函数中。

Answer 2

当动态创建.jPlugin_article_pager时，您应该从另一个静态父代表（如body标签）委托事件，请尝试：

$('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 );
});

关于函数的jQuery不起作用

2 个答案: