I'm using jQuery Mobile and Phonegap to develop my app, and using Phonegap's ChildBrowser plugin to let my users view links inside the app (i.e. giving the the option to go back to the app or view the link in safari).
Since the links are dynamically generated (loaded into the page via Ajax), I'm using the following code:
$('.someDIV a').live('click', function(e) {
var thisUrl = $(this).attr('href');
PhoneGap.exec("ChildBrowserCommand.showWebPage", thisUrl); // Open the link with plugin
return false;
);
While this works, it seems that jQuery Mobile insists on opening the link on its own as well, leaving my users stuck with a webpage they can't navigate out of, once they click the 'go back to app' button on the child-browser.
I've managed a workaround for non-dynamic links, but marking up this way:
<a href="#" title="http://theExternalURL.com/">link</a>
and using the following jQuery code:
$('.otherDIV a').live('click', function() {
var thisUrl = $(this).attr('title');
PhoneGap.exec("ChildBrowserCommand.showWebPage", thisUrl);
return false;
});
It works perfectly, but I can't use it on dynamically generated links, as I can't have them marked up this way.
Next thing I tried was to override jQuery Mobile's default hyperlink behavior with
e.stopImmediatePropagation(); and
event.preventDefault() but they were both ignored, een when replacing
live() with
bind() (which causes the rest not to work, but the default behavior still fires).
Help!:)
How can I solve this?