jQuery Mobile如何动态地将html添加到对话框中

时间:2011-07-02 14:38:54

标签: dialog jquery-mobile

我希望从特定页面打开一个对话框,并将动态数据加载到对话框中。

在主页面上,我有许多不同的链接,点击后会提供有关该链接的更多信息。我为该链接提供的所有数据都包含在主页面上。不知何故,我想分配对话框,以便在对话框打开时填充它。

到目前为止,我尝试过这样的事情:

  <?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; ?>

然后我有一个事件捕获器来捕获链接点击,然后将“data-desc”元加载到对话框中但这不起作用。

$('.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>

我一直在寻找一个如何在jQM中执行此操作的示例。对于jQM来说,这是一个基本必需品,我很惊讶我找不到任何例子。有人能指出我正确的方向。谢谢你的帮助。

1 个答案:

答案 0 :(得分:2)

您的代码中有许多错误:

  1. 您已将id="dialog-offer"发送给<div> data-role="content"。你应该用div

  2. div包裹在另一个data-role=page
  3. 您不一定需要使用$("#dialog-offer").dialog("open");。只需设置<a href='#dialog-offer'>

  4. 即可
  5. html()电话的选择器错误。 <p>的类名是您使用id样式选择器的类名

  6. 我已重写代码并在此处发布:http://jsfiddle.net/PBb3h/

    不完全像你的那样,但它可以做你想要的。