Flipswitch in lightswitch is going in an infinite loop

Question

I got this piece of code for rendering and using Flipswitch as a custom control in lightswitch application.

function createBooleanSwitch(element, contentItem, trueText, falseText, optionalWidth) {
var $defaultWidth = '5.4em';
var $defaultFalseText = 'False';
var $defaultTrueText = 'False';
var $selectElement = $('<select data-role="slider"></select>').appendTo($(element));

if (falseText != null) {
    $('<option value="false">' + falseText + '</option>').appendTo($selectElement);
}
else {
    $('<option value="false">' + $defaultFalseText + '</option>').appendTo($selectElement);
}

if (trueText != null) {
    $('<option value="true">' + trueText + '</option>').appendTo($selectElement);
}
else {
    $('<option value="true">' + $defaultTrueText + '</option>').appendTo($selectElement);
}


// Now, after jQueryMobile has had a chance to process the 
//     new DOM addition, perform our own post-processing:
$(element).one('slideinit', function () {
    var $flipSwitch = $('select', $(element));

    // Set the initial value (using helper function below):
    setFlipSwitchValue(contentItem.value);

    // If the content item changes (perhaps due to another control being
    //     bound to the same content item, or if a change occurs programmatically), 
    //     update the visual representation of the control:
    contentItem.dataBind('value', setFlipSwitchValue);

    // Conversely, whenver the user adjusts the flip-switch visually,
    //     update the underlying content item:
    $flipSwitch.change(function () {
        contentItem.value = ($flipSwitch.val() === 'true');
    });

    // To set the width of the slider to something different than the default,
    //    need to adjust the *generated* div that gets created right next to
    //    the original select element.  DOM Explorer (F12 tools) is a big help here.
    if (optionalWidth != null) {
        $('.ui-slider-switch', $(element)).css('width', optionalWidth);
    }
    else {
        $('.ui-slider-switch', $(element)).css('width', defaultWidth);
    }

    //===============================================================//

    // Helper function to set the value of the flip-switch
    //     (used both during initialization, and for data-binding)
    function setFlipSwitchValue(value) {
        $flipSwitch.val((value) ? 'true' : 'false');

        // Having updated the DOM value, refresh the visual representation as well
        //  (required for a slider control, as per jQueryMobile's documentation)
        $flipSwitch.slider(); // Initializes the slider

        $flipSwitch.slider('refresh');

        // Because the flip switch has no concept of a "null" value
        //    (or anything other than true/false), ensure that the 
        //    contentItem's value is in sync with the visual representation
        contentItem.value = ($flipSwitch.val() === 'true');
    }
});

}

This piece of code works fine. It renders the flipswitch on the screen. I am showing the data in an Edit screen, which is coming in a popup. Problem arises when I open that popup which contains the flipswitch and without changing any data on UI, I just try to close that popup screen. The IE hangs and it gives error saying that long script is running. When I debug the createBoolenaSwitch function, I came to know that it is going in infinite loop inside the function called setFlipSwitchValue(value){}

Why is this function getting called and this is going in an infinite loop?