刪除列表中的項目通過.append通過增加點擊事件獨立元件

Question

上我有以下的html：

<div id="info"> 
    <div class="toolbar"> 
     <h1 class="popup-title"></h1> 
     <a href="#map" class="back">Map</a> 

    </div> 

    <div class="categories rounded"> 
     <div class="column-one list-title"> 
      <h3>Categories</h3> 

     </div> 

     <div class="column-two list-items cats"> 
      <ul> 

      </ul> 

     </div> 

    </div> 
</div> 

有了這個jQuery填補了UL：

google.maps.event.addListener(marker, 'click', function() { 
    for (var i = 0; i < places.length; i++) { 
     for (var a = 0; a < places[i].categories.length; a++) { 
      $('#info .cats ul').append('<li>' + places[i].categories[a] + '</li>'); 
     } 
    } 
}); 

當a標籤帶班點擊.back我想刪除附加列表項。

$('.back').on('click', function() { 
    $('#info .cats ul').html(''); 
}); 

不幸的是，列表項不會被刪除，新的列表項只是不斷添加到舊的列表項。我也嘗試過：

$('#info .cats ul li').remove(); 

編輯：其他信息 - 這在瀏覽器中運行良好，現在我已經檢查過它。該代碼不會使用jqtouch清除ios上phonegap/cordova中的'li'項目。這可能是與平臺交互的更深層次的問題。對於我想要實現的目標，有沒有可能的替代代碼解決方案？

Answer 1

<div id="info"> 
    <div class="toolbar"> 
     <h1 class="popup-title"></h1> 
     <a href="#map" class="back">Map</a> 
    </div> 

    <div class="categories rounded"> 
     <div class="column-one list-title"> 
      <h3>Categories</h3> 
     </div> 

     <div class="column-two list-items cats"><ul></ul></div> 

    </div> 
</div> 

的Javascript

var $list = $('#info .cats ul'); 

google.maps.event.addListener(marker, 'click', function() { 
    for (var i = 0; i < places.length; i++) { 
     for (var a = 0; a < places[i].categories.length; a++) { 
      $list.append('<li>' + places[i].categories[a] + '</li>'); 
     } 
    } 
}); 


$('.back').on('click' , function (event) { 
    $list.empty(); 
    return false; //prevent the default anchor link action 
}); 

您需要防止的錨鏈接的默認操作。還要緩存選擇器，以便每次都不必查詢DOM。

Answer 2

你的代碼很好，但jQuery append的最佳實踐是使用一個字符串。

例如

var ulList = ''; 
    google.maps.event.addListener(marker, 'click', function() { 
     for (var i = 0; i < places.length; i++) { 
      for (var a = 0; a < places[i].categories.length; a++) { 
       ulList += '<li>' + places[i].categories[a] + '</li>'; 
//$list.append('<li>' + places[i].categories[a] + '</li>'); 
      } 
     } 
$list.append(ulList); 
ulList = null; 
    });