gpt4 book ai didi

Jquery 对话框打开事件未触发

转载 作者:行者123 更新时间:2023-11-30 23:51:38 26 4
gpt4 key购买 nike

我有一个 aspx 页面,其中有两个具有相同类的面板,它们应该充当对话框。我正在尝试使用对话框(“open”)打开对话框,但它似乎不起作用。下面是代码片段。

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

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

最佳答案

总的来说,您的代码应该如下所示:

$('.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),在这些情况下使用类。

关于Jquery 对话框打开事件未触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4842825/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com