クリックした単語のテキストを表示します。 Jquery

Question

こんにちは、別のjquery関数から作成された<li>タグの間のクリックされた単語からテキストを取得しようとしています。

この機能は、各単語の周りに<span>というタグを追加し、任意の単語をクリックすると、クリックされたテキストを表示するはずです。これは、別々にテストしたときにうまく動作します。

唯一の問題は、私はなどなど、この機能.live('click' function()を行う必要があるので、テキストがページのロード後に生成されるので、それは動作しませんです....

私は私の人生のために取得することはできません構文の権利。

$('li.ingredient').contents().each(function(_, node) { 
var nodelist = node.textContent.split(/\s/).map(function(word) { 
    return $('<span>', { 
     text: word + ' ', 
     click: function() { 
      alert($(this).text()); 
     } 
    }).get(0); 
}); 

$('li.ingredient').empty().append(nodelist); 
}); 

Answer 1

ネイティブのArrayオブジェクトには、mapメソッドが付属していません。

$('li.ingredient').contents().each(function(_, node) { 
    // array of words 
    var nodelist = $(node).text().split(/\s/); 
    var str = ""; 
    for (var i = 0; i < nodelist.length; i++) { 
    str += "<span>" + nodelist[i] + " </span>"; 
    } 

    $('li.ingredient').html(str).find("span").click(function(){ 
    alert($(this).text()); 
    }); 
}); 

Answer 2

どのようにこの例について：jsFiddle

はこのような何かを試してみてください。

この例では、ボタンがいくつかランダムな単語を追加し、それぞれがスパンタグでラップされているリストがあります。任意の単語をクリックすると、値がコンソールに記録されます。

のjQuery：働い

$('button').click(function(){ 
    $('li').append('<span>foo</span> '); 
}); 

$('li').on('click','span',function(e){ 
    console.log($(this).text()); 
});