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"
},