在jqueryMobile中向Listview添加元素

Question

我有一個列表視圖。我需要添加和從列表中刪除。添加到列表中時，jquery移動樣式不會被添加到新內容中。

<ul data-role="listview" id="contributionList"> 
    <li id="l1"><a>5.00</a><a data-icon="delete" data-role="button" id="1"></a></li> 
    <li><a>10.00</a><a data-icon="delete" data-role="button"></a></li> 
    <li><a>15.00</a><a data-icon="delete" data-role="button"></a></li> 
    <li><a>20.00</a><a data-icon="delete" data-role="button"></a></li> 
    <li><a>25.00</a><a data-icon="delete" data-role="button"></a></li> 
    <li><a>50.00</a><a data-icon="delete" data-role="button"></a></li> 
    <li><a>100.00</a><a data-icon="delete" data-role="button"></a></li> 
</ul> 

我有一個fieldset添加額外的清單。

<fieldset class="ui-grid-a"> 
    <div class="ui-block-a"> 
     <input type="text" placeholder="Add new Amount" id="contributionAmount" /> 
    </div> 
    <div class="ui-block-b"> 
    <input type="button" value="Add" id="addContribution"/> 
    </div> 
</fieldset> 

我正在使用追加函數來結束添加到列表中的其他數量。金額被添加，但造型（即jquery mobile）類不適用於新增加的金額。 有人可以告訴我如何克服這個問題。

Answer 1

得到它的工作：

• http://jsfiddle.net/NXrRp/10/

JS

$('.deleteMe').live('click', function(){ 
    $(this).parent().remove(); 
    $('#contributionList').listview('refresh'); 
}); 

$('#addContribution').click(function() { 
    var newAmount = $('#contributionAmount').val(); 

    if(newAmount != '') { 
     $('#contributionList').append('<li><a>' + newAmount + '</a><a class="deleteMe"></a></li>').listview('refresh'); 
     $('#contributionAmount').val(''); 
    } else { 
     alert('Nothing to add'); 
    } 
}); 

HTML

<div data-role="page" id="home"> 
    <div data-role="content"> 
     <ul data-role="listview" id="contributionList" data-split-icon="delete" data-split-theme="d"> 
      <li id="l1"><a>5.00</a><a id="1" class="deleteMe"></a></li> 
      <li><a>10.00</a><a class="deleteMe"></a></li> 
      <li><a>15.00</a><a class="deleteMe"></a></li> 
      <li><a>20.00</a><a class="deleteMe"></a></li> 
      <li><a>25.00</a><a class="deleteMe"></a></li> 
      <li><a>50.00</a><a class="deleteMe"></a></li> 
      <li><a>100.00</a><a class="deleteMe"></a></li> 
     </ul> 
     <br /> 
     <fieldset class="ui-grid-a"> 
      <div class="ui-block-a"> 
       <input type="text" placeholder="Add new Amount" id="contributionAmount" /> 
      </div> 
      <div class="ui-block-b"> 
      <input type="button" value="Add" id="addContribution"/> 
      </div> 
     </fieldset> 

    </div> 
</div> 

Answer 2

你必須刷新listview的jQuery移動到正確的類添加到正確的元素在你的listview：

$('#addContribution').on('click', function() { 
    var amount_val = $('#contributionAmount').val(); 
    if (amount_val != '') { 
     $('#the-listview').append('<li>' + amount_val + '</li>').listview('refresh'); 
    } 
}); 

這裏是一個演示：http://jsfiddle.net/PQ39n/1/

文檔爲jQuery Mobile的listview S： http://jquerymobile.com/demos/1.0/docs/lists/docs-lists.html

編輯

Phill Pafford帶來了一個好點，.on()是jQuery 1.7中的新功能，jQuery Mobile團隊建議在jQuery Mobile 1.0中使用jQuery 1.6.4。在這種情況下，.on()與使用.bind()相同，因此它們可以互換而沒有問題。