Question

我在表单上的每个单选按钮旁边都有一个图像。单选按钮的数量和内容是从数据库中提取的。我正在尝试在这些图像上创建一个点击事件，它提供了有关相应选项的快速介绍。

$('#icon').click(function() {
    $('#dynamicid').dialog();
    return false;
});

我知道如何在click上创建一个对话框，但不知道如何从div创建它，其id和内容是使用php从DB中获取的。我怎么能这样做？

P.S：我是jQuery的新手。

Answer 1

这很大程度上取决于周围因素。就像对话框div来自哪里一样。

让我们暂时假设无论其他标记如何，您都可以单击图像，并且对话框div是标记中的下一个兄弟：

<div id="wrapper">
  <input type="radio"> <!-- simplified; I didn't look up the actual markup syntax -->
  <img src="foo" class="clicky"/>
  <div class="dialog">This is the related dialog</div>

  <input type="radio"> <!-- simplified; I didn't look up the actual markup syntax -->
  <img src="bar" class="clicky"/>
  <div class="dialog">This is related to the previous image</div>
</div>
<div id="myDialog"></div> <!-- a container that can be reused; put it right before the body tag closes -->

您隐藏对话框div，因为在点击之前您不需要它们：

.dialog, #myDialog { display: none; }

然后您将点击委托或以其他方式绑定到此类图像。我喜欢代表：

$('#wrapper').delegate('img.clicky', 'click', function() {
  var theContent = $(this).next().html();
  $('#myDialog').html(theContent).dialog();
});

就这么简单。包装器正在监听点击（这可能是任何包含可点击图像的祖先），在图像上听到了咔嗒声（这是“这个”）。我们使用jQuery遍历下一个兄弟（对话框div），将其内容添加到我们的容器div中，并在其上调用dialog（）。

更新了小提琴：http://jsfiddle.net/txugb/3/

（请注意，虽然包含了jQuery UI，但它的CSS不是;对话框看起来不正确但会出现。）

[更新：] 为了响应我提出的方式可能的布局问题，我修改了函数以重用单个对话框容器。

在海报评论之后，我发现了最初的建议可能一直存在缺陷。当jQuery UI隐藏对话框时，我相信它会将它附加到body标签。

使用jQuery的动态对话框

1 个答案: