Question

Calendar Page:

$(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);
       });
    }); 
 });

Result Page:

$(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 });
});
});

(The script is located in one file and uploaded at the beginning of the life of the application and does not load any page.)

What I am trying to do is have a page with a calendar. When choosing a date, the user goes to another with the date selected parameter.
On the second page, he sees the orders on that date.
It also has a button back to calendar. My problem is that when he returns to the calendar change event of the select “ddlRooms” – the ‘post’ occurs twice. I tried to do this:

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

but the UI then the select does not work properly.

Answer 1

There is an alternative to event bind/unbind and on/off. Instead of even unbinding before you bind it again use jQuery event filter, it can be used to identify if event is already been bind.

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

This is my usage example:

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

});

I am using each because my carousel div has many inner blocks but principle is the same. If #carousel inner div elements don’t have click event add them that event. In your case this will prevent multiple event binding (if that is your problem).