Невозможно добавить динамические данные в список в jquery

Question

Я пытаюсь добавить данные в li динамически, но не могу добавить его. Есть несколько строк данных для добавления. Я получаю мой HTML-код разметки виден на экране .Здесь есть HTML ..

<div data-role="content"> 
<ul id="ContactList"> 
</ul> 
</div> 

А вот код JQuery.

function onSuccess(contacts) { 
//console.log(JSON.stringify(contacts)) 
$('#ContactList').empty(); 
    $.each(contacts, function(key, value) { 
    if(value.name){ 
     $.each(value.name, function(key, value) { 
      if(key == 'formatted'){ 
       name = value; 
      }      
     }); 
    } 
    if(value.phoneNumbers){ 
     $.each(value.phoneNumbers, function(key, value) { 
      phone = value.value; 
     }); 
    }      
    $('#ContactList').append(' 
    < li>< a href=" #">< h3 class="ui-li-heading">'+name+'< /h3>< div class="ui-li-desc">Club '+phone+'< /div>< /a>< /li>'); 

    $('#ContactList').listview(); 

    } 

Answer 1

, кажется, что код отсутствует закрывающие скобки )} к .each функции и HTML-теги имеют < (пробел) сразу после их открытия. попробовать этот код:

function onSuccess(contacts) { 
     //console.log(JSON.stringify(contacts)) 
     $('#ContactList').empty(); 
     $.each(contacts, function (key, value) { 
      if (value.name) { 
       $.each(value.name, function (key, value) { 
        if (key == 'formatted') { 
         name = value; 
        } 
       }); 
      } 
      if (value.phoneNumbers) { 
       $.each(value.phoneNumbers, function (key, value) { 
        phone = value.value; 
       }); 
      } 
      $('#ContactList').append('<li><a href="#"><h3 class="ui-li-heading">' + name + '</h3><div class="ui-li-desc">Club ' + phone + '</div></a></li>'); 
     }); 
     $('#ContactList').listview(); 
    } 

рабочий JSFiddle

Answer 2

добавить

$('#ContactList').listview('refresh'); 

Answer 3

код HTML форматирование не правильно в той строке, где вы строите содержание. Теги html нарушены.

Вместо:

$('#ContactList').append(' 
    < li>< a href=" #">< h3 class="ui-li-heading">'+name+'< /h3>< div class="ui-li-desc">Club '+phone+'< /div>< /a>< /li>'); 

Используйте следующий:

$('#ContactList').append('<li><a href="#"><h3 class="ui-li-heading">'+name+'</h3><div class="ui-li-desc">Club '+phone+'</div></a></li>'); 

Answer 4

Попробуйте это!

function onSuccess(contacts) 
    { 

    var h3 = $('<h3 class="ui-li-heading"></h3>'); 
    var div = $('<div class="ui-li-desc"></div>'); 
    var ac = $('<a href=" #"></a>'); 
    var li = $('<li></li>'); 

    $('#ContactList').empty(); 
     $.each(contacts, function(key, value) { 
     if(value.name){ 
      $.each(value.name, function(key, value) { 
       if(key == 'formatted'){ 
        name = value; 
       }      
      }); 
     } 

    if(value.phoneNumbers){ 
      $.each(value.phoneNumbers, function(key, value) { 
       phone = value.value; 

     }); 

    } 

     h3.html(name); 
     div.html(phone); 

     ac.html(h3+div); 

     li.html(ac); 



     $('#ContactList').append(li); 
     $('#ContactList').listview('refresh'); 
     }); 
    }