Jquery Dialog Open 事件未触发答案

【问题标题】：Jquery Dialog Open event not firingJquery Dialog Open 事件未触发
【发布时间】：2011-01-30 12:14:32
【问题描述】：

我有一个 aspx 页面，其中有两个面板具有相同的类，应该用作对话框。我正在尝试使用 dialog("open") 打开对话框，但它似乎不起作用。下面是代码sn-p。

<script type="text/javascript">
    $(document).ready(function() {

        $(".descPanel").dialog({ autoOpen: false,
            open: function() {
                $(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar").addClass("ui-state-error");
            }
        });

        $('.image').mouseover(function() {
            $($(this).parent()).children('.descPanel').dialog('open');
        });
    });
</script>

HTML 结构：

<form id="form1" runat="server">
<div>
    <table>
        <tr id="tr">
            <td></td>
            <td></td>
            <td>
                <asp:Image runat="server" ImageUrl="~/Jquery/Untitled.jpg" CssClass="image" />
                <asp:Panel runat="server" ID="mypanel" CssClass="descPanel">
                    <asp:Label runat="server" ID="mylabel" CssClass="label" Text="hello"></asp:Label>
                </asp:Panel>
            </td>
        </tr>
    </table>
    <table>
        <tr id="tr">
            <td></td>
            <td></td>
            <td>
                <asp:Image ID="Image1" runat="server" ImageUrl="~/Jquery/Untitled.jpg" CssClass="image" />
                <asp:Panel runat="server" ID="Panel1" CssClass="descPanel">
                    <asp:Label runat="server" ID="Label1" CssClass="label" Text="hello1111"></asp:Label>
                </asp:Panel>
            </td>
        </tr>
    </table>
</div>
</form>

我已验证指向对话框的元素已被正确引用。有什么解决方案可以让它工作吗？

【问题讨论】：

标签： jquery dialog

【解决方案1】：

总体而言，您的代码应如下所示：

$('.image').each(function() {
  var panel = $(this).siblings('.descPanel');
  $(this).mouseover(function() {
    panel.dialog('open');
  });
});    
$(".descPanel").dialog({ 
    autoOpen: false,
    open: function() {
        $(this).siblings(".ui-dialog-titlebar").addClass("ui-state-error");
    }
});

You can test it out here.

为什么？好吧，当您调用 .dialog() 时，它会将 <div> 包装在另一组元素中，但更重要的是，它会将这些元素移动到<body>，所以他们不在那里找到相对的了。在上面，我们找到了与图像一起使用的面板，并在它们被移动之前存储了对它们的引用。

顺便说一句，您应该从代码中删除 id="tr"，重复的 ID 只会带来麻烦！（以及无效的 HTML），在这些情况下使用一个类。

【讨论】：

对不起尼克。问问题时我没有很好地格式化。它是 ui-dialog-titlebar。我现在已经编辑了这个问题。此外，我无法在问题中添加完整的代码。它不接受。
@Kunal - 啊，我看到了你的错误，你的问题需要更多的编辑来显示 HTML，一会儿。
尼克你能帮我格式化问题吗？我的完整问题看起来不像那样。提前致谢。
@Kunal - 是的，已经完成，并更新了答案以匹配您在这里的实际问题，在查看所有代码后很明显:)
非常感谢。首先我在我的代码中使用了 asp:repeater，所以它会重复 HTML，因此 tr 得到相同的 ID。感谢您的快速回复。你能告诉我为什么你把每个功能。我不想遍历所有图像。我只想打开鼠标悬停在其上的图像的对话框。

【解决方案2】：

刚刚发现您还可以通过以下方式将函数绑定到open 事件：

yourDialog.bind("dialogopen", function(event, ui) {
    //your code here
});

【讨论】：

这正是我所需要的，可以在全局范围内监听对话创建。干杯:)