mcottondesign

Loving Open-Souce One Anonymous Function at a Time.

Bootstrap menus with Backbone.js and Mobile Safari

Bootstrap is great. Backbone.js is great. Same with underscore.js and jQuery.

These are all great things but there is a problem with clicking on dropdown menu items from mobile safari on iOS devices. There is an easy fix for regular jQuery and even Backbone.js.

Old code:

$('#userSettings').click(function(e) {
    e.preventDefault();
    (new EditUserProfileView({ model: userList.getCurrentUser() })).render();
});

New Code:

$('#userSettings').on('touchstart click', function(e) {
    e.preventDefault();
    (new EditUserProfileView({ model: userList.getCurrentUser() })).render();
});

Old Code:

    events: {
        "click .layout_edit":        "actionEdit",
        "click .layout_save":        "actionSave",
        "click .layout_add":         "actionCameras",
        "click .layout_settings":    "actionSettings",
        "click .layout_share":       "actionShare",
        "click .layout_delete":      "actionDelete",
        "click .layout_new":         "actionNew"
    }

New Code:

    events: {
        "click .layout_edit":        "actionEdit",
        "click .layout_save":        "actionSave",
        "click .layout_add":         "actionCameras",
        "click .layout_settings":    "actionSettings",
        "click .layout_share":       "actionShare",
        "click .layout_delete":      "actionDelete",
        "click .layout_new":         "actionNew",
        "touchstart .layout_edit":        "actionEdit",
        "touchstart .layout_save":        "actionSave",
        "touchstart .layout_add":         "actionCameras",
        "touchstart .layout_settings":    "actionSettings",
        "touchstart .layout_share":       "actionShare",
        "touchstart .layout_delete":      "actionDelete",
        "touchstart .layout_new":         "actionNew"
    },