2011-12-15 18 views
5

Ho un listview. Devo aggiungere e rimuovere dalla lista. Aggiungendo alla lista, lo stile mobile jQuery non viene aggiunto al nuovo contenuto.Aggiunta di elementi a Listview in jqueryMobile

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

Ho un campo per aggiungere somme all'elenco.

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

Sto utilizzando la funzione di aggiunta per terminare altri importi aggiunti all'elenco. L'importo viene aggiunto, ma le classi di stile (vale a dire jquery mobile) non vengono applicate al nuovo importo aggiunto. Qualcuno può dirmi come superare il problema.

risposta

12

ottenuto che funziona:

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

Grazie.Questo risolve il problema che stavo cercando di capire per quasi 3 ore. – Hozefa

+0

Perché la funzione $ (document) .ready viene chiamata due volte. Aggiungendo l'importo, vengono aggiunti due volte. – Hozefa

+0

@Hozefa non si dovrebbe usare $ (documento) .ready con jQM, cercare domande correlate –

4

si deve aggiornare la listview per jQuery Mobile per aggiungere le classi corrette per gli elementi corrette nel listview:

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

Ecco una demo: http://jsfiddle.net/PQ39n/1/

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

EDIT

Phill Pafford presenta un buon punto che .on() è nuovo in jQuery 1.7 e il team di jQuery Mobile suggerisce di utilizzare jQuery 1.6.4 con jQuery Mobile 1.0. In questo caso, .on() equivale a utilizzare .bind() in modo che possano essere interscambiati senza problemi.

+0

Grazie per l'aiuto. – Hozefa

+0

@Jasper FYI il .on() non è disponibile in jQuery 1.6.4 che è la versione supportata di jQm 1.0 Altrimenti +1 –

+0

@PhillPafford Sì, ho usato 1.6.4 per un po ', ma poi mi sono interessato a cosa avrebbe rotto se io passato a 1.7 e l'unica cosa che ho notato è la gestione degli eventi leggermente più veloce (devo ancora vedere che qualcosa si rompe). – Jasper

Problemi correlati