Finden $ (this), wenn jQuery auf mit dynamisch erstellten Elementen

Question

Lets sagen, dass ich eine Liste, wo die li dynamisch erstellt werden, über AJAX:

​<ul id="demo-list"> 
    <li data-test="test1" >Test 1</li> 
    <li data-test="test2" >Test 2</li> 
    <li data-test="test3" >Test 3</li> 
</ul>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

Wenn einer der li geklickt wird, möchte ich Holen Sie sich die Daten-Attribut-Test von diesem bestimmten li.

habe ich versucht, so etwas wie:

$('#demo-list').on('click', 'li', function() { 
    console.log($(this).find('li').data('test')); 
}); 

Aber es wird offensichtlich alle Listenelemente und nicht nur die bestimmten, wo das Ereignis stattfindet.

Auch weiß ich, wie dies zu tun mit .live(), aber meine Frage ist, wie es geht über .on()

Answer 1

Sie haben den Fund von nach dem $(this) Aufruf zu entfernen:

$('#demo-list').on('click', 'li', function() { 
console.log($(this).data('test')); 
}) 

Sie können die Arbeitsbeispiel finden Gebrüll:

http://jsfiddle.net/P356B/2/

EDIT :

Wenn Sie ein Widget/Plugin haben, das diesen Inhalt generiert, könnten Sie einfach den Click-Event-Handler im Plugin anhängen. oder haben ein Konstrukt wie:

(function($){ 
    $(function(){ 
    $('#demo-list').on('click', 'li', function() { 
    console.log($(this).data('test')); 
    }) 
    }); 
})(jQuery) 

Answer 2

Ich glaube nicht, Sie find wollen. Just do

console.log($(this).data('test')); 

Answer 3

versuchen, dies zu tun:

console.log($(this).data('test')); 

Check hier: http://jsfiddle.net/wDzkW/4/