Question

I am using jqueryMobile :

 <div id="header"> 
  <h1>conent</h1>
 </div>

now in .js file :

 $("#header").attr("data-role","header");

This not works , but if i did :

 <div id="header" data-role="header"> 
  <h1>conent</h1>
 </div>

It works properly , but why when we are inserting attribute data-role dynamically through jquery it does`nt work?

Answer 1

What matters here is the time at which you are adding the attribute to the #header div. I would suggest that you bind to the pagebeforecreate event. This way you are adding the attribute before JQM initializes the page. i.e.

​$(document).on('pagebeforecreate', function(){
    $("#header").attr("data-role","header");
});​

Here is a working example http://jsfiddle.net/codaniel/wJdvK/1/

Here is a quote from docs.

pagebeforecreate

Triggered on the page being initialized, before most plugin auto-initialization occurs.

$( '#aboutPage' ).live( 'pagebeforecreate',function(event){
  alert( 'This page was just inserted into the dom!' );
});

Note that by binding to pagebeforecreate, you can manipulate markup before jQuery Mobile’s default widgets are auto-initialized. For example, say you want to add data-attributes via JavaScript instead of in the HTML source, this is the event you’d use.

$( '#aboutPage' ).live( 'pagebeforecreate',function(event){
  // manipulate this page before its widgets are auto-initialized
});