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

Question

我试图将表格单元格中的一些文本动态地放入 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) 元素中找到具有“abstract”类的元素。

这是表代码的相关部分：

<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 还很陌生，所以我很高兴到目前为止我得到了

任何建议！

Answer 1

文档 说：

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

更多信息此处。

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

$(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 创建一个对话框。然后，您告诉他们在需要时打开。

Answer 2

看起来你只想要类似的东西：

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