jquery - 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>

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

score 3 · Accepted Answer

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

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

这是来自文档的引用。

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
});

score 0 · Accepted Answer

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

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

或者正确的方式（完全一样，只是短一点）：

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

2 回答 2