Question

今天，我需要一些帮助。

我有一个HTML5移动应用程序，当用户点击键盘上的GO按钮时，搜索结果会加载无限滚动。

一切都像魅力一样！除了每次用户重新开始并且正在进行新的搜索时，结果会加载两次或三次，或者只是在搜索之前附加了搜索中丢失的结果，意味着我无法清除结果列表。

我用jQuery尝试了一切，比如删除，清空列表，以任何方式绑定提交处理程序，这是不可能的。每次加载和附加新结果或混合时。我做错了什么？

我的问题是，如何清除或删除列表，以便处理程序每次只使用新的空列表触发一次。

搜索页面

<form id="search">
<fieldset data-icon="search">
<input type="search" id="gos" placeholder="What are you looking for?" />
</fieldset>
</form>

这里是提交处理程序：

    $(document).on('submit','#search',function(e){ 
               var bla = $('#sterm').val();                             
               $('#content').scrollPagination();
               $('#gos').val('');
               // Handler to change the page
               e.preventDefault();                  
               });

这里是加载结果的代码。

   $.fn.scrollPagination = function() {



var settings = { 
nop     : 10,
offset  : 0,
error   : 'No More Posts!',
delay   : 0
}

return this.each(function() {       

$this = $(this);
$settings = settings;
var offset = $settings.offset;
var busy = false;

// Custom messages based on settings
$initmessage = '';

// Append custom messages and extra UI
$this.append('<div class="content"></div><div class="loading-bar">'+$initmessage+'</div>');

function getData() {

$('.animation_image').show();

// Post data to ajax.php
$.post('http://', {
action        : 'scrollpagination',
number        : $settings.nop,
offset        : offset,
}, function(data) {

var output='';
for (var i in data.users) {
output+="<li>" + data.users[i].firstName + " " + data.users[i].lastName + "--" + data.users[i].month+"</li>";
}




// Change loading bar content (it may have been altered)
$this.find('.loading-bar').html($initmessage);
$('.animation_image').hide();

// If there is no data returned, there are no more posts to be shown. Show error
if(output === "") { 
alert($settings.error);
$this.find('.loading-bar').html($settings.error);   
}
else {

// Offset increases
offset = offset+$settings.nop; 
$this.find('.content').append(output);   


// No longer busy!  
busy = false;
}   

});

}   

getData(); // Run function initially

$('#items').scroll(function() {

if($(this)[0].scrollHeight - $(this).scrollTop() === $(this).outerHeight() && !busy)  {
// Now we are working, so busy is true
busy = true;                    
// Tell the user we're loading posts
$this.find('.loading-bar').html('<img src="static/images/ajax-loader.gif">');
// Run the function to fetch the data inside a delay
setTimeout(function() {
getData();
}, $settings.delay);
}   
});

});

}

以下是结果页面

<ul id="content"></ul>

感谢。

jQuery追加和JSON多次触发

0 个答案: