jQueryMobile如何在对话框中动态添加html

Question

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

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

到目前为止，我已经尝试过这样的东西：

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

然后我有一个事件捕捉器来捕捉链接点击，然后将"数据描述"元加载到对话框中，但这不起作用。

$('.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来说是一个基本的必要条件，以至于我很惊讶找不到任何例子。有人能给我指个正确的方向吗。谢谢你的帮助。

Answer 1

您的代码中有许多错误：

1. 您已将id="dialog-offer"赋予具有data-role="content"的<div>。您应该用data-role=page 将该div包装在另一个div中

2. 您不一定需要使用$("#dialog-offer").dialog("open");。仅设置<a href='#dialog-offer'>

3. html()调用的选择器错误。<p>的类名是与id样式选择器一起使用的

我已经重写了代码并将其发布在这里：http://jsfiddle.net/PBb3h/

不完全像你的，但它做你想做的。