jquery mobile stripping my id's

I am just starting to use jquery mobile.

When I drop jquery mobile js and css into a working jquery page, jquery mobile seems to be stripping off my custom id's and breaking the example. Is there a 'jquery mobile' way to do this?

$(document).ready(function() {

            // ----
            $('#btnGPSDefault').click(function() {
                alert("!");
                getPosition('');
            });

            // ----
            $('#btnGPSHigh').click(function() {
                getPosition('{enableHighAccuracy : true}');
            });   
      });



<button id="btnGPSDefault">Get Coordinates (default setti开发者_Python百科ngs)</button>
<button id="btnGPSHigh">Get Coordinates (high accuracy)</button>

I would have to see the problem myself, but I can guess that when you use buttons and jquery mobile - a lot of things happen. The buttons show up as nice and rounded ones. That's done with additional markup.

Try using firebug to see if your buttons are there anymore - it's possible that they were replaced with those good looking ones. And even if they are there - they might not be the same DOM nodes.

Try the following:

1. add to your script window.hook=$('#btnGPSDefault');
2. after refreshing the page write window.hook in firebug console, press enter and click what comes up (if it's not empty)

It should show you where the node is if it still exists.

If jquery mobile really messes it up - it's a bug.

I suppose you can work around it using <a class="button" instead of <button

If you add a data-role="none" to the button element you use, jquery mobile will not mark it up. Check out this for more info: http://jquerymobile.com/test/docs/forms/docs-forms.html

This is something I used:

 <input type="button" data-role="none" class="flip ui-btn-corner-all ui-shadow" value="+" style="font-size: 300%; background-color: green; color: white; " />   

As you can see from "class", I pulled in some of the jquery mobile css to help round the button.

I'm not sure what your are trying to do, but you may also need to disable ajaxForms/Links by loading the following JS before you load the jquery mobile JS:

$(document).bind("mobileinit", function(){ $.extend( $.mobile , { ajaxFormsEnabled: false, ajaxLinksEnabled: false ); });

For more info:

http://jquerymobile.com/test/docs/api/globalconfig.html