6

動的に生成されているリストがあり、アイテムをクリックしindex()て別の関数に渡します。

問題は、このリストが動的に入力されており、イベントを実行してもコードが応答しないことですclick。しかし、動的に入力された要素に加えて、静的なli要素をいくつかリストに追加すると、それらの静的な要素が機能します。その非常に奇妙です。

いくつかのコード：

これにより、リストが動的に作成されます。

function SetOpenRecentURL( openRecentURL ) {

 $('#recentProjectsId').append('<li>' + openRecentURL + '</li>')
 }

これは、Index（）を渡すためのクリックイベントです。

$('#recentProjectsId li').on('click', function () {
        var projIndex = $(this).index();
        console.log(projIndex)
        OpenProject()

    })

いくつかの静的Liを含むHTML

<div class="recentProjects" id="recentProjectsId">
<li>Test 1</li>
<li>Test 2</li>
        </div>

プログラムを実行すると、リストは完璧に見え、静的なliと動的なものが含まれていますが、動的なものをクリックすることはできず、静的なものだけが含まれています。

4

2 に答える 2

21

プログラムを実行すると、リストは完璧に見え、静的なliと動的なものが含まれていますが、動的なものをクリックすることはできず、静的なものだけが含まれています。

これは、コードがclickハンドラーをバインドする方法では、リスナーがバインドされた時点でのみページ内の要素にバインドされるためです。クリックリスナーの設定は少し異なります。イベントの委任を利用することで機能します。

$('#recentProjectsId').on('click', 'li', function () {
    // snip...
});

に追加のselector引数を指定することによって.on()：

イベントをトリガーする選択された要素の子孫をフィルタリングするためのセレクター文字列。セレクターがnullまたは省略されている場合、イベントは選択された要素に到達したときに常にトリガーされます。

HTMLは現在無効であることに注意してください。要素は、 s、s、およびsの<li>内部でのみ有効です。<ul><ol><menu>

于 2013-01-19T20:21:21.333 に答える
1

委任されたイベントを使用できます：

$("#recentProjectsId").on("click", "li", function() {
    var projIndex = $(this).index();
    console.log(projIndex)
    OpenProject()
});

これ#recentProjectsIdがの親要素です<li>。

于 2013-01-19T20:21:10.533 に答える