Display text from clicked word. Jquery
<p>Hi I'm trying to get the text from a clicked word in between <code>&lt;li&gt;</code> tags that is created from another jquery function.</p>

<p>This function adds <code>&lt;span&gt;</code> tags around each word and on click of any word it should display the clicked text.  This works fine when tested seperately.</p>

<p>Only problem is it doesn't work because the text is generated after the page load so I need to make this function <code>.live('click' function ()</code> etc etc ....</p>

<p>I can't for the life of me get the syntax right.</p>

<p>Any suggestions??</p>

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

$('li.ingredient').empty().append(nodelist);
});
</code></pre>
