0

私の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 );
            });
4

2 に答える 2

2

イベントは、コードが呼び出されたときに実際に存在するものにのみバインドされます。確かにドキュメント準備機能は必要ないようですが、このコードにたどり着いたとき、画面上の実際の DOM 要素はありますか?

あなたはそれが動的に生成されると言うので、そうではないと思います。また、存在しないオブジェクトに関数をバインドすることはできません。たとえば、実際にオブジェクトを作成する同じ関数内で、オブジェクトを動的に追加した後で、このコードを呼び出します。

于 2012-07-14T14:21:10.477 に答える
1

動的に作成される.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 );
});
于 2012-07-14T14:21:19.103 に答える