JQM - 折りたたみ可能なヘッダーに画像を動的に追加する

Question

折り畳み可能なセットの中にリストビューとして表現されたその中のユーザーのアクティビティとともに、曜日の折り畳みセットがあります。

<div data-role="collapsible-set" id="calCol" data-collapsed-icon="arrow-d" data-collapsed="true" data-iconpos="right"> 

       <div data-role="collapsible"> 
        <h1 id="day1Header">Sunday<img src="#" /></h1> 
        <ul id="day1" data-role="listview"> 
        </ul> 
       </div> 

       <div data-role="collapsible"> 
        <h1>Monday</h1> 
        <ul id="day2" data-role="listview"> 
        </ul> 
       </div> 
... 

私は私のデータベースから取るのユーザーの活動のためのすべてのコンテンツをので、私は動的にこのようにすべての私のコンテンツを挿入します。

var userActivitiesObj = JSON.parse(data.d); 
     for (var i = 0; i < userActivitiesObj.length; i++) { 

      for (var j = 0; j < userActivitiesObj[i].time.length; j++) { 
       var listItem = "<li style='background-color: " + userActivitiesObj[i].hobColor + ";'>"; 
       listItem += userActivitiesObj[i].actName + " - " + userActivitiesObj[i].actAddress + " - "; 
       listItem += userActivitiesObj[i].time[j].startTime + "-" + userActivitiesObj[i].time[j].endTime; 
       listItem += " (" + userActivitiesObj[i].time[j].audiance + ")</li>";      
       $("#day" + userActivitiesObj[i].time[j].day).append(listItem); 
       $("#day" + userActivitiesObj[i].time[j].day).listview("refresh");     
      } 

     } 

一つ私がやって放置最後の事はの画像を追加することですその日のヘッダーへのすべての活動。私はHTMLでそれを行うことを試みたときに 、それは完璧に働いた：動的にそれをやろうとしているとき、それは正しく動作しません

<h1 id="day1Header">Sunday<img src="#" /></h1> 

けど。

$("#day1Header").html($("#day1Header").html()+"<img src='#'"); 

と：：

$("#day1Header").append("<img src='#'"); 

私はここの.list（「リフレッシュ」）機能のようなものが欠けていますことを知っているが、私は何見当がつかない私は何をしようとしていても、その そうです。

Answer 1

jQuery Mobileは、ヘッダー内にクラスui-collapsible-heading-toggleのアンカータグを追加し、そこで折りたたみ可能なタイトルを配置します。ですから、以前の画像を削除して、このように新しいイメージを追加することができます

$("#day1Header .ui-collapsible-heading-toggle img").remove(); 
$("#day1Header .ui-collapsible-heading-toggle").append('<img src="https://placeimg.com/44/22/tech" />'); 

DEMO