Wie bekomme ich einen Wert von listview mit jQuery Mobile

Question

Ich versuche, einen Wert von Data-Name zu erhalten, wenn Benutzer ein Element aus ListView durch Klicken ausgewählt. Wenn ich auf einen Eintrag in der Listenansicht klicke, passiert nichts. Hier ist mein Code unter https://jsfiddle.net/93zht15z/

<ul data-role="listview" data-filter="true" data-input="#myFilter" id="citynames"> 
</ul> 

$(document).on('pagebeforecreate', '#addLocations', function(){ 
    //bind cities to addLocations 
    var cities= [ 
    { 
     "code": "s0000768", 
     "englishnames": "City 1"}, 
    { 
     "code": "s0000001", 
     "englishnames": "City 2"}, 
    { 
     "code": "s0000404", 
     "englishnames": "City 3"} 
    ];    
    cities.sort(function(a, b) { 
     return a.englishnames.localeCompare(b.englishnames); 
     }); 
    $.each(cities, function(i, obj) { 
     $("#citynames").append("<li data-name='"+ obj.englishnames + "'>" +obj.englishnames+"</a></li>"); 
    });    
}); 

$(document).on("pagecreate", function() { 
    $("#citynames").listview('refresh'); 
    }); 
    }); 
    $('#citynames ul').children('li').bind('touchstart mousedown', function(e) { 
     localStorage.city = $(this).attr('data-name'); 
     alert('Selected Name=' + $(this).attr('data-name')); 
}); 

Was mache ich falsch?

Joe

Answer 1

i gelöscht nur den ul Tag aus Ihrer Auswahl $('#citynames').children('li') und es funktioniert gut.

Und Sie Code haben Sie eine zusätzliche });

$(document).on("pagecreate", function() { 
    $("#citynames").listview('refresh'); 
    }); 
}); 

einfach löschen

Answer 2

Sie haben ein paar Probleme mit der Sie Skripts. Ich würde den gesamten Code in das Pagecreate Ereignis verschieben (die Seiten-ID enthalten, '#addLocations'), und verwenden Sie event delegation das Click-Ereignis auf die dynamischen LIs zu binden: $('#citynames').on('touchstart mousedown', "li", function(e) {... Mit Daten-Attribute können Sie die .jqmData() Funktion abrufen der Wert.

$(document).on("pagecreate", '#addLocations', function() {  
    var cities= [ 
     {"code": "s0000768", "englishnames": "City 1"}, 
     {"code": "s0000001", "englishnames": "City 2"}, 
     {"code": "s0000404", "englishnames": "City 3"} 
    ];    
    cities.sort(function(a, b) { 
     return a.englishnames.localeCompare(b.englishnames); 
    }); 

    $.each(cities, function(i, obj) { 
     $("#citynames").append("<li data-name='"+ obj.englishnames + "'>" +obj.englishnames+"</a></li>"); 
    }); 
    $("#citynames").listview('refresh'); 

    $('#citynames').on('touchstart mousedown', "li", function(e) { 
      localStorage.city = $(this).jqmData('name'); 
      alert('Selected Name=' + $(this).jqmData('name')); 
    });  
}); 

Aktualisiert FIDDLE