显示点击词的文字。 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()); 
});