title: jQuery Mobile how to dynamically add html to dialog box
body: <p>I am looking to open a dialog from a specific page and load dynamic data into the dialog.</p>
  
  <p>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 for 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.</p>
  
  <p>I've tried something like this so far:</p>
  
  <pre><code>  &lt;?php foreach($offers as $offer) : ?&gt;
      &lt;a href="#" data-rel="dialog" data-icon="info" data-role="button" data-desc="&lt;?php echo $offer-&gt;{'offer_description'}; ?&gt;" class="offer" id="offer-&lt;?php echo $offer-&gt;{'offer_id'}; ?&gt;"&gt;&lt;?php echo $offer-&gt;{'offer_name'}; ?&gt;&lt;/a&gt;
    &lt;?php endforeach; ?&gt;
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>$('.offer').live('click', function(){
    var data = $(this).attr('data-desc');
    $("#data-desc").html(data);
    $("#dialog-offer").dialog("open");
    return false;
  });
  
  
  &lt;div data-role="content" id="dialog-offer"&gt;
  &lt;p class="data-desc"&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>