2012-10-17 99 views
0

我有以下的HTML代碼。它是一個可摺疊的listItems中的內彈出:用jquery附加到div

<div data-role="popup" id="wavelistPopup" class="ui-content"> 
    <div id="wavlistContainer" data-role="collapsible-set" data-theme="c" data-content-theme="c" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" style="margin:0; width:250px;"> 
     <div data-role="collapsible" data-inset="false"> 
      <h2>Wave1</h2> 
      <ul data-role="listview"> 
       <li>Entfernung: </li> 
       <li>Von Autor:</li> 
       <li>Schwierigkeit:</li> 
       <li>Beschreibung:</li> 
       <li><a data-rel="dialog">Erfahrungsberichte</a></li> 
       <li><a data-rel="dialog">Wissenswertes</a></li> 
       <li><a data-rel="dialog">&Auml;hnliche Waves</a></li> 
      </ul> 
      <button>Sync</button> 
      <button>L&ouml;schen</button> 
     </div><!-- /collapsible --> 

    </div><!-- /collapsible set --> 
</div><!-- /popup --> 

現在我想另一個可摺疊添加到wavlistcontainer用下面的代碼:。爲此,我首先做一個ajax調用,並在回調函數中工作。

function populateWaveList(){ 
    console.log("populateWaveList"); 
    requestWavesInArea(position.position.coords.latitude, position.position.coords.longitude, 
      position.position.coords.latitude+5, position.position.coords.longitude+5, 10, 
      function(waves){ //after AJAX call 
      console.log(waves); 
       for(var wavei in waves){ // for every element to add 
        var content = ""; 
        var wave = waves[wavei]; 
        console.log(wave); 
        var content =+ jQuery('somestring';  '<div data-role="collapsible" data-inset="false">'+ 
           '<h2>'+wave.name+'</h2>'+ 
           '<ul data-role="listView">'+  
             '<li>Entfernung von Autor: '+'...'+'</li>'+ 
             '<li>Autor: '+wave.creatorname+'</li>'+ 
             '<li>Beschreibung: '+wave.description+'</li>'+ 
             '<li>Umfang: '+'...'+'</li>'+ 
             '<li>Terrain: '+wave.terrainType+'</li>'+ 
             '<li>Autor: '+wave.creatorname+'</li>'+ 
             '<li>Schwierigkeit: '+wave.difficulty+'</li>'+ 
             '<li>ID: '+wave.waveId+'</li>'+ 
             '<li>Datum: '+wave.created+'</li>'+ 
            '</ul>'+ 
            '<button disabled="disabled">Sync</button>'+ 
            '<button disabled="disabled">L&ouml;schen</button>'+ 
           '</div>'); 
        console.log(content); // returns 'false' 
        $('#wavelistContainer').append(content); 
       } 
       $('#wavelistPopup').popup('open', { x : 460, y : 180 }); 
    }); 
} 

當我打印的內容,我得到false這greately混淆了我。任何人都可以幫助我嗎?

謝謝

+2

如果您使用的答案改變的問題,他們得到無關緊要......這不是你應該如何使用SO ... –

+0

你是對的,我再次執行錯誤:D – MJB

回答

1

兩個問題:

  • 你使用=+代替+=
  • 你轉換很快的HTML到jQuery對象

這條線:

​var content =+ 'somestring'; 

相同

​var content = 0 + 'somestring'; 

等產生NaN。取而代之的

content =+ jQuery('<div data-role="collapsible" data-inset="false">'+ 

content += '<div data-role="collapsible" data-inset="false">'+ 

請注意,您應該也爲更好的性能,僅生成一個content字符串和循環之前添加它只有一次(聲明它,並追加它在循環之後)。

+0

謝謝。我測試並編輯了我的帖子。現在我弄錯了。 – MJB

+0

如果你用'var content =「構建它,我不認爲你會弄錯。內容+ ='somestring';'。檢查你運行的代碼。 –

+0

我相應地編輯了我的代碼。現在我遇到了創建的元素不可摺疊的問題。他們直接顯示。 – MJB

1

你有問題,你的代碼

content =+ jQuery('<div data-role="collapsible" data-inset="false">'+ 
--------------^-----^ 
            '<h2>'+wave.name+'</h2>'+ 
            '<ul data-role="listView"'>+  
--------------------------------------------------------------^ 

應該

content +='<div data-role="collapsible" data-inset="false">'+ 
            '<h2>'+wave.name+'</h2>'+ 
            '<ul data-role="listView">'+ 
+0

我相應地編輯了我的代碼。現在我遇到了創建的元素不可摺疊的問題。他們直接顯示。 – MJB

+0

@MJB代碼看起來很好...很難弄清楚有什麼問題..檢查所有的div都正確關閉..? – StaticVariable

+0

只有一個div,關閉可摺疊的div,並關閉。 – MJB