Click-Ereignis für dynamisch generierten Liste die Elemente mithilfe von jquery

Habe ich eine Liste wird dynamisch generiert und ich dann auf das Element klicken und übergeben Sie die index() zu einer anderen Funktion.

Das problem ist, dass diese Liste wird dynamisch gefüllt und mein code reagiert nicht, wenn ich click Veranstaltung. ABER, wenn ich ein paar Statische li-Elemente der Liste zusätzlich zu den dynamisch aufgefüllt diejenigen, die diese Statischen Routen arbeiten. Seine sehr sonderbar.

Code:

Diese dynamisch erstellt die Liste:

function SetOpenRecentURL( openRecentURL ) {

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

Dies ist das click-Ereignis übergeben wird der Index():

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

    })

HTML mit ein paar Statische Li

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

Wenn ich mein Programm, meine Liste sieht perfekt aus und schließt meine statische li plus meine dynamische, aber ich kann nicht klicken Sie auf die dynamische diejenigen, die nur statisch.

Dein markup ist nicht gültig, da <li> Elemente können nicht <div> Eltern.

InformationsquelleAutor Rob | 2013-01-19

  1. 18

    Wenn ich mein Programm, meine Liste sieht perfekt aus und schließt meine statische li plus meine dynamische, aber ich kann nicht klicken Sie auf die dynamische diejenigen, die nur statisch.

    Das ist, weil, wie Ihr code bindet die click - handler ist es nur gebunden, um Elemente auf der Seite an der Zeit, dass die den Hörer gebunden ist. Einrichten der Klick-listener nur ein wenig anders und es wird funktionieren, durch die Nutzung von event-delegation:

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

    Durch Angabe eines weiteren selector argument .on():

    Einen Selektor-string zum filtern der Nachkommen der selektierten Elemente, die das Ereignis auszulösen. Wenn der selector ist null oder nicht angegeben ist, wird das Ereignis immer dann ausgelöst, wenn es erreicht das ausgewählte element.

    Beachten Sie, dass Ihre HTML-ist derzeit ungültig. <li> - Elemente sind nur gültig innerhalb des <ul>s, <ol>s, <menu>en.

    Funktionierte perfekt! Ich dachte .on() statt .click() war die Pflege es für mich, denke ich nicht. Danke für die Hilfe
    Sie waren sehr nah dran. Mit .on() bekam Sie 95% der Weg dorthin.
    Funktioniert wie ein cham

    InformationsquelleAutor Matt Ball

  2. 0

    Können Sie verwenden Delegierte Veranstaltungen:

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

    Hier #recentProjectsId ist das übergeordnete element der <li>.

    InformationsquelleAutor VisioN

Schreibe einen Kommentar