在调整模式大小之前，jQuery不会在ajax加载模式下运行

Question

我有一个模型，当打开它时，会加载一个局部视图。

局部视图有一个jQuery函数。当模式打开时，jQuery不会运行。

一旦我调整了模型的大小，jQuery就会运行并产生预期的结果。

下面是加载html并打开模式的代码

 $(document).ready(function () {
        $("#reschedule").button().click(function () {

                            var url = $("#rescheduleUrl").attr('href');

                            $.ajaxSetup({ cache: false });
                            $.ajax({
                                url: url,
                                success: function (data) {
                                    $("#rescheduleDiv").html(data);
                                    $("#rescheduleDiv").dialog('open');
                                }
                            });
        });
    });

在加载的局部视图中，这是我需要立即运行的jQuery。

$('#calendar').fullCalendar({
    theme: true,
    header: {
        left: 'month,agendaWeek,agendaDay',
        center: 'title',
        right: ''
    },
    defaultView: 'agendaWeek',
    editable: false,
    minTime: 5,
    maxTime: 20,
    events: "/ServiceTicket/GetCalendarEvents/",
    allDaySlot: false
});

我也尝试过包装它。

   $(document).ready(function() {
     ...
   });

结果是一样的。

有什么想法吗?我需要做些什么才能让它马上运行？我在firebug中看过它，它确实在重新调整模式大小时运行，但直到那时才会运行。

谢谢!

Answer 1

我认为您还需要将部分视图JQuery包装在document.ready函数中。这就是我们如何让JQuery在一个从局部视图“弹出”的颜色盒模式中触发

 $(document).ready(function () {
$('#calendar').fullCalendar({
    theme: true,
    header: {
        left: 'month,agendaWeek,agendaDay',
        center: 'title',
        right: ''
    },
    defaultView: 'agendaWeek',
    editable: false,
    minTime: 5,
    maxTime: 20,
    events: "/ServiceTicket/GetCalendarEvents/",
    allDaySlot: false
});
});

编辑

我认为颠倒父页面中的加载/显示函数可能会解决这个问题。

success: function (data) {    
    $("#rescheduleDiv").dialog('open');
    $("#rescheduleDiv").html(data);
 } 

通过在“显示”对话框之前填充html，doc.ready函数可能永远不会与您的事件处理程序一起触发，直到您与对话框交互。如果您先显示它，然后加载html数据，您的事件处理程序将按预期显示工作。