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がページを初期化する前に属性を追加します。すなわち

$(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にバインドすることで、jQueryMobileのデフォルトウィジェットが自動初期化される前にマークアップを操作できることに注意してください。たとえば、HTMLソースではなくJavaScriptを介してデータ属性を追加したい場合、これは使用するイベントです。

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

score 0 · Accepted Answer

pageinit-event内にコードをラップしましたか？

jQueryMobileのドキュメントをご覧ください。

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

または適切な方法（まったく同じ、少し短い）：

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

2 に答える 2