W / jQuery-Mobile Dialog Plugins

Question

I found that if I use another overlay / dialog plugin such as Clearbox or fancyBox, I will lose the function of using jQuery-Mobile after overlay initialization. The dialog box opens correctly, but I noticed an error warning on the page. I close the dialog box and then nothing works (i.e.: Beats and even reverse btn on the Chrome device and browser) - only the plug-in (dialogue).

This is what causes the overlay:

<a href="res/img/f1_1.jpg" rel="clearbox">Figure 1-1</a> 

If I add: target = "something" to the tag, the warning disappears and everything works fine; But the image is loaded into the DOM and the dialogue is obviously not desirable. Is there a fix / work-round to solve the problem. I really don't want to use the in-the-box dialog that comes w / jQuery-Mobile.

Answer 1

jQuery Mobile tries to load all links to the current page using an AJAX call. If I had to guess, the problem is that Clearbox or Fancybox actually handle the event first, and a dialog box appears as expected. After that, I assume that jQuery mobile will try to process the click event for the link and try to open the link itself, and something will go awry there.

The reason for adding the target is because jQuery Mobile does not handle these links as usual. If you can use rel = "external", this can fix the problem if you do not need it to work for Clearbox or Fancybox. Another option is to try adding data-ajax = "false" as an attribute of the tag.