jquery动态插入attr无法正常工作

Question

我正在使用jqueryMobile：

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

现在在.js文件中：

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

这不起作用，但如果我这样做：

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

它工作正常，但是为什么当我们通过jquery动态插入属性data-role时它不起作用？

Answer 1

这里重要的是您将属性添加到#header div的时间。我建议你绑定到pagebeforecreate事件。这样您就可以在JQM初始化页面之前添加属性。即。

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

以下是一个工作示例http://jsfiddle.net/codaniel/wJdvK/1/

以下是文档的引用。

<强> pagebeforecreate

在大多数插件自动初始化发生之前，在正在初始化的页面上触发。

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

请注意，通过绑定到pagebeforecreate，您可以在jQuery Mobile的默认窗口小部件自动初始化之前操作标记。例如，假设您想通过JavaScript而不是HTML源添加数据属性，这就是您要使用的事件。

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

Answer 2

您是否将代码包装在pageinit - 事件中？

查看jQuery Mobile docs。

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

或者正确的方式（完全相同，只是更短）：

$(document).bind('pagebeforecreate', function(e){
    $("#header").data("role","header");
});