顯示點擊詞的文字。 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

本地數組對象不帶有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。

本例中有一個列表，其中按鈕添加了一些隨機單詞，每個單詞都包含在span標記中。當你點擊任何單詞時，它的值被記錄到控制檯。

的jQuery：

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

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