Wie löst man das jquery click-Ereignis für die dynamisch generierte Liste aus?

Hallo, ich versuche, die bereits erstellte Liste dynamisch mit jquery durch eine neue Liste zu ersetzen. Aber auf der neu erstellten Liste kann ich kein jquery-Ereignis verwenden.Wie löst man das jquery click-Ereignis für die dynamisch generierte Liste aus?

ich eine Liste von Spielern erstellt haben

Sachin
Sourav
Rahul

Auf jeden Listennamen klicken sie ihre ID-Warnung der dann eine neu erstellte Liste ersetzt dynamisch mit jquery.

Kohli
MS
Rahane

Aber ich bin nicht in der Lage für neu erstellte Liste das Click-Ereignis auszuwählen. Es zeigt keinen Fehler in der Konsole und nichts passiert, wenn wir auf einen Namen einer neuen dynamischen Liste klicken.

<html> 
<head> 

<script src="jquery-3.1.1.js"></script> 
<script> 
$(document).ready(function(){ 
    $("#videoul li").click(function(){ 
     var vocab_id = $(this).attr('id'); 
     alert("Hi the ID is " + vocab_id); 

     var aaila = '<a href="#" id="i_am_link">Click me again</a><ul id = "videoul"><li id="Kohli">Virat</li><li id="Dhoni">M S</li><li id="Rahane">Ajinkya</li></ul>'; 

     $('#videowrapper').html(aaila); 
    }); 
}); 
</script> 
</head> 
<body> 

<div id="videowrapper"><a href="#abc" id="i_am_link">Click me</a> 
    <ul id="videoul"> 
     <li id="Tendulkar">Sachin</li> 
     <li id="Ganguly">Sourav</li> 
     <li id="Dravid">Rahul</li> 
    </ul> 
</div> 


</body> 
</html>

Ich bin jetzt ratlos, wie diese Arbeit zu machen.

Quelle

2017-01-16 Sunil Singh

Sie delegiert Veranstaltungen nutzen könnten, aber in Ihrem Fall scheint es ziemlich offensichtlich, dass Sie nur den Inhalt in jedem LI, wenn darauf geklickt ersetzen könnte, anstatt die gesamte Liste der Ersatz – adeneo

Da Sie dynamisch erstellte Elemente erwähnt, müssen Sie Ereignis Delegation mit on

Schauen Sie sich diese Schnipsel

$("body").on("click", "#videoul li", function(){ 
 
    var vocab_id = $(this).parent().attr('id'); 
 
    console.log("Hi the ID is " + vocab_id); 
 
    
 
    var aaila = '<a href="#" id="i_am_link">Click me again</a><ul id = "videoul"><li id="Kohli">Virat</li><li id="Dhoni">M S</li><li id="Rahane">Ajinkya</li></ul>'; 
 
    
 
    $('#videowrapper').html(aaila); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="videowrapper"><a href="#abc" id="i_am_link">Click me</a> 
 
    <ul id="videoul"> 
 
     <li id="Tendulkar">Sachin</li> 
 
     <li id="Ganguly">Sourav</li> 
 
     <li id="Dravid">Rahul</li> 
 
    </ul> 
 
</div>

Quelle

2017-01-16 19:19:44

Dank Richard, seine Arbeits ... :) –

Use "auf" Methode verwenden. Anstelle des Selektors $ ("body") können Sie ein anderes Element verwenden, das nicht dynamisch erstellt wird.

$('body').on('click', '#videoul li', function() { 
    var vocab_id = $(this).attr('id'); 
    alert("Hi the ID is " + vocab_id); 

    var aaila = '<a href="#" id="i_am_link">Click me again</a><ul id = "videoul"><li id="Kohli">Virat</li><li id="Dhoni">M S</li><li id="Rahane">Ajinkya</li></ul>'; 

    $('#videowrapper').html(aaila); 
});

Quelle

2017-01-16 19:23:54 psdev

Es wird empfohlen, den Listener dem nächsten nicht generierten Element hinzuzufügen. In diesem Fall würde ich vorschlagen, dass Sie '$ ('# videowrapper')' anstelle von '$ ('body')' verwenden. – Emmanuel

Ja, Sie haben Recht. Ich war mir nur nicht sicher, welcher Teil seines Codes "nicht generiert" ist. – psdev

Wie löst man das jquery click-Ereignis für die dynamisch generierte Liste aus?

Antwort

Verwandte Themen