jQuery Mobile how to dynamically add html to dialog box

I am looking to open a dialog from a specific page and load dynamic data into the dialog.

On the main page I have a number of different links that when clicked provides more information on that link. All the data I have fo开发者_开发知识库r that link is included on the main page. Somehow I would like to assign the dialog so that it is populated when the dialog opens.

I've tried something like this so far:

  <?php foreach($offers as $offer) : ?>
    <a href="#" data-rel="dialog" data-icon="info" data-role="button" data-desc="<?php echo $offer->{'offer_description'}; ?>" class="offer" id="offer-<?php echo $offer->{'offer_id'}; ?>"><?php echo $offer->{'offer_name'}; ?></a>
  <?php endforeach; ?>

Then I have an event catcher to catch the link click and then load the "data-desc" meta into the dialog but this doesn't work.

$('.offer').live('click', function(){
  var data = $(this).attr('data-desc');
  $("#data-desc").html(data);
  $("#dialog-offer").dialog("open");
  return false;
});


<div data-role="content" id="dialog-offer">
<p class="data-desc"></p>
</div>

I have been looking for an example on how to do this in jQM. This is such a basic necessity for jQM in general that I am surprised that I cannot find any examples. Could someone point me in the right direction. Thanks for the help.

You have a number of errors in your code:

1. You have given the id="dialog-offer" to a <div> with data-role="content". You should wrap that div in another div with data-role=page

2. You don't necessarily need to use $("#dialog-offer").dialog("open");. Just set <a href='#dialog-offer'>

3. You have the wrong selector for the html() call. The class name of the <p> is what you're using with an id-style selector

I have rewritten the code and posted it here: http://jsfiddle.net/PBb3h/

Not exactly like yours, but it does what you want.