Добавление элементов в Listview в jqueryMobile

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 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 Mobile, чтобы добавить правильные классы к правильным элементам в вашем 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

РЕДАКТИРОВАТЬ

Фил Паффорд говорит о том, что .on() является новым в jQuery 1.7и команда jQuery Mobile предлагает использовать jQuery 1.6.4 с jQuery Mobile 1.0.В этом случае .on() аналогично использованию .bind(), поэтому они могут быть заменены без проблем.