无法在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

在构建内容的行中，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 3

添加

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

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');
      });
    }