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