Agregar elementos a Listview en jqueryMobile

Question

Tengo una vista de lista. Necesito agregar y eliminar de la lista. Al agregar a la lista, el estilo móvil de jquery no se agrega al nuevo contenido.

<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> 

Tengo un conjunto de campos para agregar cantidades a la lista.

<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> 

Estoy usando la función de agregar para finalizar otras cantidades que se agregan a la lista. El monto se agrega, pero las clases de estilo (es decir, jquery mobile) no se aplican a la nueva cantidad agregada. ¿Puede alguien decirme cómo superar el problema?

Answer 1

tengo trabajo:

• 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

Usted tiene que actualizar la listview para jQuery Mobile para agregar las clases correctas de los elementos correctos en su listview:

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

Aquí es una demostración: http://jsfiddle.net/PQ39n/1/

Docs para jQuery Mobile listview s: http://jquerymobile.com/demos/1.0/docs/lists/docs-lists.html

EDITAR

Phill Pafford señala un buen punto que .on() es nuevo en jQuery 1.7 y el equipo jQuery Mobile sugiere utilizar jQuery 1.6.4 con jQuery Mobile 1.0. En este caso, .on() es lo mismo que usar .bind(), por lo que se pueden intercambiar sin problemas.