Holding down on text in iOS does not bring up the 'copy' button on jQueryMobile Dialog when using ajax

Question

I am talking about one of these Dialog boxes that pop up: http://jquerymobile.com/test/docs/pages/page-dialogs.html

(short url for mobile http://bit.ly/KhCGVD)

Click 'Open Dialog' -- on that dialog box, nothing is copy-able in iOS without unless 'data-ajax="false"' is used in the link. (works fine on Android)

Putting '-webkit-user-select: auto!important;' (or 'text' instead of 'auto') does nothing.

Adding the javascript 'document.documentElement.style.webkitTouchCallout = "auto";' does nothing.

I am desperate to make this work as I have built an entire thing around the assumption that copy would work on it in iOS as well as android, but didn't test in iOS until it was finished :(.

Any help would be greatly appreciated, Thanks.

edit: tested on 4.3.5 -- 4.3.2 -- iOS 5.1 -- not working

Answer 1

I'm afraid i can't provide simple answer to your question (like adding something in config or init), but i hope current solution will be sufficient.

---

Problem

Problem lies quite deep in the code of this framework. First of all we have a jquery.mobile.dialog.js file in which we have a line:

    $el.bind( "vclick submit", function( event ) {
               // code
            })

As you can see here we are adding a binding vclick to the $el - whole dialog box container.

Event vclick on it's own is generated by jQuery Mobile in vmouse.js and after digging there i managed to detect where actual problem arises:

    $( this ).bind( realType, dummyMouseHandler );

This line is required to make event work in some browsers, namely Opera Mini (as described in commented text above this line).

---

Solution

So, here is one of the solutions, open file jquery.mobile.vmouse.js and comment out line

    $( this ).bind( realType, dummyMouseHandler );

I've tested it on an iPad and copy functionality is available after that tiny patch.