Jquery移动和更改页面功能,双帖请求

时间:2012-12-11 09:49:19

标签: jquery jquery-mobile

日历页面:

$(document).delegate('#ViewOrders', 'pageinit', function () {
   var ordersSource, calendar;
   var ordersParams = new Object();
   var tonnageParams = new Object();
   if (parseInt($("#ddlRooms").val()) > 0) {
       tonnageParams.RoomId = $("#ddlRooms").val();
   }

   $.post('/AdminPages/Mobile/Ajax/Ajax.ashx?p=GetTonnage', tonnageParams, function (data) {
       ordersSource = data;

       setTimeout(function () {
           calendar = $("#calendar").fullCalendar({
              header: {
                   left: 'prev,next today',
                   center: '',
                   right: 'title'
               },
               isRTL: false,
               theme: true,
               selectable: true,
               select: function (start, end, allDay) {
                   ordersParams.Start = getDateString(start);
                   ordersParams.End = getDateString(end);

                   if ($("#ddlRooms").val() > 0) {
                       ordersParams.RoomId = $("#ddlRooms").val();
                   }
                   else {
                       delete ordersParams.RoomId;
                   }

                   $.mobile.changePage("ShowOrders.aspx", { data: ordersParams, transition: 'slide', rel: 'dialog' });
                calendar.fullCalendar('destroy');
               },
               events: ordersSource
           });
       }, 500);
   });

   $("#ddlRooms").change(function () {
       var elem = $(this);

       calendar.fullCalendar('removeEventSource', ordersSource);
       tonnageParams = new Object();

       if (parseInt(elem.val()) > 0) {
           tonnageParams.RoomId = elem.val();
       }

       $.post('/AdminPages/Mobile/Ajax/Ajax.ashx?p=GetTonnage', tonnageParams, function (data) {
           ordersSource = data;
           calendar.fullCalendar('addEventSource', ordersSource);
       });
    }); 
 });

结果页面:

$(document).delegate('#ViewOrders', 'pageinit', function () {
$("#btnBack").click(function () {
    var id = $(this).data('backid');
    $.mobile.changePage("ViewOrders.aspx", { data: { RoomId: id }, reloadPage: true, transition: 'slide', reverse: true });
});
});

(该脚本位于一个文件中,并在应用程序生命周期的开始时上传,不会加载任何页面。)

我要做的是有一个带日历的页面。选择日期时,用户使用日期选择参数转到另一个日期。 在第二页,他看到了该日期的订单。 它还有一个回到日历的按钮。我的问题是当他返回选择“ddlRooms”的日历更改事件时 - 'post'出现两次。我试着这样做:

$("#ddlRooms").unbind('change').change(function () {
...
});

但UI然后选择无法正常工作。

1 个答案:

答案 0 :(得分:1)

有事件绑定/取消绑定和开/关的替代方法。在再次绑定它之前,使用jQuery事件过滤器,它可以用于识别事件是否已被绑定,而不是解除绑定。

http://www.codenothing.com/archives/2009/event-filter/

这是我的用法示例:

$('#carousel div:Event(!click)').each(function(){

});

我正在使用每个因为我的旋转木马div有许多内部块但原则是相同的。如果#carousel内部div元素没有click事件,则添加该事件。在您的情况下,这将阻止多个事件绑定(如果这是您的问题)。