JQuery mobile error - cannot call methods on a button before initialization; tried to call the 'disabled' method

Question

According to the documentation ( http://jquerymobile.com/demos/1.2.0/docs/api/events.html ), the pageinit event should be raised after all the widgets and plugins for the jQuery mobile page have completed. Therefore, I believe that I should be able to interact with the elements on this page with impunity in the callback. However, I listen to how the page is initialized, and then tries to interact with the button on the page, and I get the following error:

cannot call methods on a button until initialized; tried calling method disabled

I put together a code to show you:

http://codepen.io/mattsnider/pen/mvcbD

What gives? Does the pageinit file not work as documented or is this an error?

Answer 1

There is nothing wrong with your pageinit event. The <a> tag is incorrect.

To remove the error you get, you need to make two changes to your code:

• Its not disabled , its disable
• before calling the disable method, you must call the button() method. That way you would initialize the button element.

Here's what the code looks like now:

  $('#ageNext').button().button('disable'); 

But if you do this, you will get an error message:

Uncaught TypeError: unable to call addClass method from undefined

The applicant lies in the code that calls the disable method

 disable: function() { this.element.attr( "disabled", true ); this.button.addClass( "ui-disabled" ).attr( "aria-disabled", true ); //^^ Uncaught TypeError: Cannot call method 'addClass' of undefined return this._setOption( "disabled", true ); } 

Do you see this.button there? This will become undefined if the item is not a real button.

So, I have disable to work only with the element type input[type=button] and <button/> . For some reason, this does not work as expected on the <a/> buttons. I have this to work by manually adding the ui-disabled class to the element, for example:

 $(document).on('pageinit', '#age', function (e) { $('#ageNext').addClass('ui-disabled'); }); 

Demo: http://jsfiddle.net/hungerpain/gzAHT/

Answer 2

This can also happen if you have unsurpassed HTML tags, especially worries </div> without the previously declared <div> .

The first thing to check may be that your HTML is well-formed.