C# jQuery对话框仅第一次显示

有jQuery对话框问题。我想利用ajax在一个人单击calDayContentEntry div时在对话框窗口中呈现日历内容。以下代码在第一次单击时起作用，但在关闭对话框后，我无法再让该条目的对话框再次显示。其他条目第一次也可以工作，但二次单击将不会再次打开对话框

下面是我遇到问题的相关代码（都在同一个asp.net mvc 3 razor视图中）。有没有人可以通过一些调整来解决这个问题

           ...
           <div class="calDayContent">
            @foreach (var content in day.Contents)
            {
                <div class="calDayContentEntry">
                    <input type="hidden" value="@content.Entry.Id" class="hiddenId" />   
                    <div class="@content.DisplayClass">@content.Entry.Hours.ToString() hrs</div>
                </div>
                <div class="leaveRequestPopup"></div>
            }
            </div>
           ...

<script type="text/javascript">
    $().ready(function () {
        $('.calDayContentEntry').click(function () {
            getAndShowDialogContents(this);
        });

        // Register close event for dialog if overlay is clicked
        $('.ui-widget-overlay').live("click", function () {
            //Close the dialog 

            $currentDialog.dialog("close");
        });
    });

    function getAndShowDialogContents(entryDiv) {

        var entryId = $(entryDiv).find('input[type="hidden"]').val();
        var contentdiv = $(entryDiv).next('.leaveRequestPopup');
        var x = $(entryDiv).position().left + jQuery(entryDiv).outerWidth();
        var y = $(entryDiv).position().top - jQuery(document).scrollTop();

        $.ajax(
        {
            type: 'POST',
            url: 'Request/GetCalendarDetails',
            data: { id: entryId },
            success: function (result) {

                $(contentdiv).html(result);

                $(contentdiv).dialog({
                    autoOpen: false,
                    modal: true,
                    title: 'Details',
                    width: 400,
                    height: 300,
                    draggable: false
                });

                $(contentdiv).dialog("option", "position", [x, y]);
                $currentDialog = $(contentdiv).dialog('open');
            }
        });
    }
</script>

。。。
@foreach（日内的var内容。内容）
{
@content.Entry.Hours.ToString（）小时
}
...
$（）.ready（函数（）{
$（'.calDayContentEntry'）。单击（函数（）{
getAndShowDialogContents（此）；
});
//如果单击覆盖，则为对话框注册关闭事件
$（'.ui小部件覆盖）'）.live（“单击”，函数（）{
//关闭对话框
$currentDialog.dialog（“关闭”）；
});
});
函数getAndShowDialogContents（entryDiv）{
var entryId=$（entryDiv）.find（'input[type=“hidden”]'）.val（）；
var contentdiv=$（entryDiv）.next（'.leaveRequestPopup'）；
var x=$（entryDiv.position（）.left+jQuery（entryDiv.outerWidth（）；
var y=$（entryDiv.position（）.top-jQuery（document.scrollTop（）；
$.ajax(
{
键入：“POST”，
url:“请求/GetCalendarDetails”，
数据：{id:entryId}，
成功：功能（结果）{
$（contentdiv）.html（结果）；
$（contentdiv）.dialog({
自动打开：错误，
莫代尔：是的，
标题:"详情",，
宽度：400，
身高：300，
可拖动：错误
});
对话框（“选项”、“位置”、[x，y]）；
$currentDialog=$（contentdiv.dialog（'open'）；
}
});
}

这是有效的声明吗

$currentDialog.dialog("close");

我认为在这一点上，它超出了范围

如果您在$（）之前在外部定义它，可以吗

---

您需要重置对话框

contentdiv.dialog("destroy").dialog(....

注意：如果你这样做

 var contentdiv = $(entryDiv).next('.leaveRequestPopup');

那么contentdiv已经是一个jQuery对象，所以您可以这样说：

contentdiv.click(function(){
  //code here
});

您不需要再次将其包装在$（contentdiv）中

调用此函数时：

getAndShowDialogContents(this);

它将作为参数传递原始文档对象，而不是jQuery对象，使用：

getAndShowDialogContents($(this));

---

为了传递当前的jQuery对象

，我认为周末在这个问题上增加了一个新的视角。下面是有效的代码。基本上，我没有为每个条目使用弹出div，而是在页面末尾使用了一个div。每个对话框都会重用该div。我使用全局变量，以便在有人单击对话框外部以关闭它时引用它。希望这能帮助其他人

           ...
            <div class="calDayContent">
            @foreach (var content in day.Contents)
            {
                <div class="calDayContentEntry">
                    <input type="hidden" value="@content.Entry.Id" class="hiddenId" />

                        <div class="@content.DisplayClass">@content.Entry.Hours.ToString() hrs</div>
                </div>
            }
            </div>
            ...
            <div class="leaveRequestPopup"></div>
            ...


<script type="text/javascript">
    $().ready(function () {
        $('.calDayContentEntry').click(function () {
            getAndShowDialogContents(this);
        });

        // Register close event for dialog if overlay is clicked
        $('.ui-widget-overlay').live("click", function () {
            //Close the dialog 

            $currentDialog.dialog("close");
        });

        $currentDialog = $('.leaveRequestPopup').dialog({
            autoOpen: false,
            modal: true,
            title: 'Details',
            width: 400,
            height: 300,
            draggable: false
        });
    });

    function getAndShowDialogContents(entryDiv) {

        var entryId = $(entryDiv).find('input[type="hidden"]').val();
        var x = $(entryDiv).position().left + jQuery(entryDiv).outerWidth();
        var y = $(entryDiv).position().top - jQuery(document).scrollTop();

        $.ajax(
        {
            type: 'POST',
            url: 'Request/GetCalendarDetails',
            data: { id: entryId },
            success: function (result) {

                $currentDialog.html(result);

                $currentDialog.dialog("option", "position", [x, y]);
                $currentDialog.dialog('open');
            }
        });
    }
</script>

。。。
@foreach（日内的var内容。内容）
{
@content.Entry.Hours.ToString（）小时
}
...
...
$（）.ready（函数（）{
$（'.calDayContentEntry'）。单击（函数（）{
getAndShowDialogContents（此）；
});
//如果单击覆盖，则为对话框注册关闭事件
$（'.ui小部件覆盖）'）.live（“单击”，函数（）{
//关闭对话框
$currentDialog.dialog（“关闭”）；
});
$currentDialog=$（'.leaveRequestPopup'）。对话框({
自动打开：错误，
莫代尔：是的，
标题:"详情",，
宽度：400，
身高：300，
可拖动：错误
});
});
函数getAndShowDialogContents（entryDiv）{
var entryId=$（entryDiv）.find（'input[type=“hidden”]'）.val（）；
var x=$（entryDiv.position（）.left+jQuery（entryDiv.outerWidth（）；
var y=$（entryDiv.position（）.top-jQuery（document.scrollTop（）；
$.ajax(
{
键入：“POST”，
url:“请求/GetCalendarDetails”，
数据：{id:entryId}，
成功：功能（结果）{
$currentDialog.html（结果）；
$currentDialog.dialog（“选项”、“位置”、[x，y]）；
$currentDialog.dialog（'open'）；
}
});
}

我认为那里有一个双句点的语法错误。谢谢，不管怎样，你帮助更多的人注意到了拼写错误，然后是那些投票否决了一段代码（没有拼写错误）的人。谢谢你的回答，但是我想我错过了我的代码中我称之为destroy的地方。在创建对话框之前，我会在ajax成功函数中销毁它吗？另外，感谢您提供有关传递jQuery对象的提示。我应该更清楚，我会适当地修改我的代码。谢谢你的帮助，但我解决了我的问题并发布了完整的解决方案。我试图在解决方案中使用多个div，但我只需要重用一个div。原始div正在丢失，我无法重用它们。在这种情况下，它是一个全局变量，因此它在范围内。但这仍然不是一件好事。我使用全局变量，以便在单击覆盖时可以访问对话框，从而允许用户单击页面上的任何位置以关闭对话框。如果有更好的方法，请告诉我。我发布了我对这个问题的解决方案，如果你能用这个解决方案纠正全局变量的用法，我将不胜感激，我只是不知道如何解决。

           ...
            <div class="calDayContent">
            @foreach (var content in day.Contents)
            {
                <div class="calDayContentEntry">
                    <input type="hidden" value="@content.Entry.Id" class="hiddenId" />

                        <div class="@content.DisplayClass">@content.Entry.Hours.ToString() hrs</div>
                </div>
            }
            </div>
            ...
            <div class="leaveRequestPopup"></div>
            ...


<script type="text/javascript">
    $().ready(function () {
        $('.calDayContentEntry').click(function () {
            getAndShowDialogContents(this);
        });

        // Register close event for dialog if overlay is clicked
        $('.ui-widget-overlay').live("click", function () {
            //Close the dialog 

            $currentDialog.dialog("close");
        });

        $currentDialog = $('.leaveRequestPopup').dialog({
            autoOpen: false,
            modal: true,
            title: 'Details',
            width: 400,
            height: 300,
            draggable: false
        });
    });

    function getAndShowDialogContents(entryDiv) {

        var entryId = $(entryDiv).find('input[type="hidden"]').val();
        var x = $(entryDiv).position().left + jQuery(entryDiv).outerWidth();
        var y = $(entryDiv).position().top - jQuery(document).scrollTop();

        $.ajax(
        {
            type: 'POST',
            url: 'Request/GetCalendarDetails',
            data: { id: entryId },
            success: function (result) {

                $currentDialog.html(result);

                $currentDialog.dialog("option", "position", [x, y]);
                $currentDialog.dialog('open');
            }
        });
    }
</script>