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 的时间。我建议您绑定(bind)到 pagebeforecreate 事件。这样，您就可以在 JQM 初始化页面之前添加该属性。即

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

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

这是文档中的引用。

创建前的页面

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

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

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

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