jQuery - outputting updated HTML after using replaceWith

Question

The live example (which only works in FireFox. Still working on that): http://taylorcammack.com/projects/twitter-story/

A little intro: jQuery novice so the syntax may be rough, trying to create a container for a standard Twitter widget.

Here's the function that is used to update the head & subhead. I'm using a similar method to update the widget ID which I haven't added.

    $('.submit').click(function(){
    $('.header_twitter').replaceWith("<div class=\"header_twitter\">#" + searchTerm + "</div>");
    $('.subhead_twitter').replaceWith("<div class=\"subhead_twitter\">" + twitSubhead + "</div>" );
});

After updating the head & subhead, I scrape the #embedContainer div via:

var embedCode = $( "#embedContainer" ).html();
$('.generateEmbed').click(function(){
    $('.embed').text("" + embedCode + "");
});

The issue I'm having is that the embed container is not registering the HTML that was updated with the replaceWith. Any ideas?

Answer 1

Define embedcode within the click event function

$('.generateEmbed').click(function(){
    var embedCode = $( "#embedContainer" ).html();
    $('.embed').text("" + embedCode + "");
});