在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()相同，因此它们可以互换而没有问题。