我有以下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>' );
}
}
});
单击类为.back的a标记时，我希望删除附加的列表项。
$( '.back' ).on( 'click', function () {
$( '#info .cats ul' ).html( '' );
} );
不幸的是，列表项没有被删除，新的列表项只是不断地添加到旧的列表项中。我也试过：
$('#info .cats ul li').remove();
编辑：更多信息-现在我已经检查了它，它在浏览器中运行得很好。代码无法使用jqtouch清除ios上phonegap/cordova中的"li"项目。这可能是平台交互的一个更深层次的问题。对于我试图实现的目标，是否有一些替代的代码解决方案？
<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了。
您的代码很好，但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;
});