jquery selectable mousedown unselecting metakey

Question

I am trying to get selectable working for a mobile app (using jquery mobile). Everything works well if I use the control mousedown to select single additions (and to do unselects).

But since it is for a mobile app I can't use the control key. I have added this code to handle the control key .. and it works to add selection events, but it breaks the unselecting of selected events. (I.e. if you click on selected item it does not un-select). Also for some reason this hangs up after a while and gets very slow processing the events...

Here is the code I am talking about:

  $("#tableId").bind("mousedown", function (e) {
        e.metaKey = true;
}).selectable();

My full set of code is in jsfiddle: http://jsfiddle.net/Y3TUj/38/

Answer 1

If you are on mobile, why don't use a tap to select and unselect (instead of metakey)...?

Try this:

    $("#tableId").bind("tap", function(e) {
        e.preventDefault();
        var el = e.target;
        if ($(el).hasClass("ui-selected")) {
           $(el).removeClass('ui-selected').addClass('ui-unselecting');
        } else {
           $(el).addClass("ui-selecting");
        }
        $("#tableId").data("ui-selectable")._mouseStop(null);
   });

Fiddle: http://jsfiddle.net/xw16e2ks/1/