jQuery 对话框仅显示第一次

本文关键字：第一次 显示 对话框 jQuery | 更新日期: 2023-09-27 18:33:10

有一个jQuery对话框问题。 我想利用 ajax 在用户单击 calDayContentEntrydiv 时在对话窗口中呈现日历内容。 以下代码在第一次单击时有效，但在关闭对话框后，我无法再为该条目再次显示对话框。 其他条目在第一次也有效，但二次单击不会再次打开对话框。

这是我遇到问题的相关代码（都在同一个 asp.net mvc 3 剃须刀视图中）。 有没有人有一些可以解决这个问题的调整？

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

jQuery 对话框仅显示第一次

这是一个有效的陈述吗？ 

$currentDialog.dialog("close");

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

也许如果你在$（）.ready之前在外面定义它

var $currentDialog;
$().ready(function () {
  ...

您需要重置对话框。

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>
相关文章：