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 数据，则事件处理程序将按预期显示工作。