jQuery UI 对话框 - 从表 DIV 中获取文本并显示 - 仅在第一次单击时发生答案

【问题标题】：jQuery UI dialog - grab text from table DIV and show - only happens on first clickjQuery UI 对话框 - 从表 DIV 中获取文本并显示 - 仅在第一次单击时发生
【发布时间】：2011-07-14 14:31:18
【问题描述】：

我正在尝试将表格单元格中的一些文本动态地放入 jQuery UI 对话框中，从表格中的链接触发（每行一个链接）。它对每个链接都有效一次，但之后就停止了。

这是我的 Javascript：

$(function() {
        $( ".abstractlink" ).click(function() {
            $( $(this).parent().find('.abstract') ).dialog({
            modal: true,
            autoOpen: true,
            height: "auto",
            width: "600",
            draggable: "true",
            title: "Project abstract",
            resizable: "false"
            });
        });
    });

问题是（我认为）每次单击链接时我都会重新初始化对话框。麻烦的是，我需要更改每次单击链接时要显示的 DIV（因此在父（TR）元素中找到具有“抽象”类的元素。

这是表格代码的相关部分：

<tr>
    <td><a href="javascript:;" class="abstractlink">View</a><div class="abstract" id="project_abstract_3">Project 3 abstract. Lorem ipsum.</div></td>
</tr>

我有一种强烈的感觉，这不是解决这个问题的一种非常优雅的方法，但由于我还是 jQuery 的新手，所以我很高兴我能走到这一步。

非常感谢任何建议！

【问题讨论】：

标签： jquery-ui dynamic html-table dialog cell

【解决方案1】：

Docs 说：

对 $(foo).dialog() 的调用将初始化一个对话框实例并将默认情况下自动打开对话框。如果你想重用一个对话框，最简单的方法是禁用 “自动打开”选项： $(foo).dialog({ autoOpen: false }) 和用 $(foo).dialog('open') 打开它。到关闭它，使用 $(foo).dialog('close')。

更多信息here。

编辑：警告，未经测试的代码：


$(function() {
    $(".abstract").dialog({
        modal: true,
        autoOpen: false,
        height: "auto",
        width: "600",
        draggable: "true",
        title: "Project abstract",
        resizable: "false"
    });

    $('.abstractlink').click(function() {
        $(this).parent().find('.abstract').dialog('open');
    });

您不是在创建一个对话框，而是为每个抽象 div 创建一个对话框。然后，您告诉他们在需要时打开。

【讨论】：

问题是我试图动态指定应该用作对话框内容的 DIV。如果我初始化对话框实例，那只是对话框的一个版本 - 我需要能够做到这一点。
我仍然认为使用多个对话框是可以的，但到目前为止，我还没有看到为什么需要单个对话框并动态替换内容的原因。如果是这种情况，请创建一个实际上不属于您的表格的对话框，然后单击将 div 的内容替换为您要显示的 div 的内容。

【解决方案2】：

看起来你只是想要这样的东西：

$(".abstractlink").live("click", function(){
  // do the onClick work in here
  });

【讨论】：