私はこれで髪を引き裂いています。私はjQuery Mobileが初めてで、ブラウザがページの一番下までスクロールするたびに新しいコンテンツをロードする機能を持っています。
また、<select>カテゴリを選択できる場所もあります。開始ページ (つまり、カテゴリが選択されていない場合) で問題なく動作します。しかし、カテゴリを選択して一番下までスクロールするとすぐに、関数bindScroll()が 2 回トリガーされます。
解決策を見つけようとほぼ2日間これに取り組んできましたが、何もありませんでした。jQuery Mobile のさまざまなイベントについてはまだよくわかっていないため、問題がある可能性があります。
私のコードを見て、できれば助けてください。このサイトは .NET MVC で構築されていますが、問題は jQuery にあります。
@using Namespace.Helpers
@{
ViewBag.Title = "Home Page";
}
<!-- Get a drop down of the different categories -->
@Html.Raw(Html.GetCategories(true, "CategoryId", 0, true))
<!-- list view to append the fetched ads to -->
<ul data-role="listview" data-inset="true" id="ad-list">
</ul>
<script>
// keeps track of how many rows to skip in the db. this is passed along to the server side
var currentPos = 0;
// save the categoryId
var categoryId = $('#CategoryId').val();
$('#page-start').live('pagecreate', function () {
// load the ads for the first call
loadAds();
//handle the category drop down
$('#CategoryId').change(function () {
// clear the list of ads
$('#ad-list').empty();
// reset so we start fetching from the first row in the db, used on server side
currentPos = 0;
// update the category value to pass along to the server
categoryId = $('#CategoryId').val();
// just to know that it has a value
console.log(categoryId);
// re-load the new ads
loadAds();
});
});
// method that loads ads via AJAX
function loadAds() {
console.log('loadAds()');
$.ajax({
// method on the server that returns a partial view
url: '/Home/LoadMoreAds',
type: 'GET',
data: {
// pass along some data
currentPosition: currentPos,
categoryId: categoryId
},
success: function (result) {
// add the result to the ad-list
$('#ad-list').append(result);
$('#ad-list').listview('refresh');
// once again, bind the scroll event
$(window).scroll(bindScroll);
},
error: function (data, textStatus, jqXHR) {
alert(textStatus);
}
});
}
// method that checks if the scroll is near the bottom of the page
function bindScroll() {
if($(document).height() > $(window).height())
{
if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
$(window).unbind('scroll');
// just to know that the method has run
console.log('bindScroll()');
// update counter to skip the already loaded rows
currentPos++;
// load new ads
loadAds();
}
}
}
</script>
編集された回答: -----------------------------------------------
スクロール イベントをバインドおよび再バインドしないように、Mike C からの提案を受けました。ページ初期化時のバインドは 1 つだけです。そして、私はこのコードを使用しました：
// method that checks if the scroll is near the bottom of the page
var scrollHappening = false;
function bindScroll() {
if (scrollHappening) {
return false;
} else {
if ($(document).height() > $(window).height()) {
if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
// just to know that the method has run
console.log('bindScroll()');
// update counter to skip the already loaded rows
currentPos++;
// load new ads
loadAds();
scrollHappening = true;
}
}
}
}
そしてajax 呼び出しの に を設定scrollHappening = falseします。success:かなりうまくいくようです！