ajax - 動的に作成された要素でjQueryを使用するときに$（this）を見つける

Question

liAJAXを介して動的に作成されるリストがあるとしましょう：

​<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>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

のいずれかliがクリックされたときに、その特定のデータ属性テストを取得したいと思いますli。

私は次のようなものを試しました：

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

ただし、イベントが発生する特定のアイテムだけでなく、明らかにすべてのリストアイテムを取得します。

また、私はこれを行う方法を知っています.live()が、私の質問は.on()

Answer 1

$(this)呼び出し後に検索を削除する必要があります。

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

以下に実際の例を示します。

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

編集：

そのコンテンツを生成するウィジェット/プラグインがある場合は、おそらくクリック イベント ハンドラをプラグインにアタッチできます。または次のような構造を持っています。

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

Answer 2

これを試してください：

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

ここをチェックしてください：http://jsfiddle.net/wDzkW/4/

Answer 3

私はあなたがしたいとは思わないfind。やるだけ

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