Question

我正在尝试使用过滤选项在div中实现无限滚动，同样，当用户停止在框中输入时，过滤应该有效。

HTML：

 <div class="span2" style="margin-top: 50px;">
    <input id="Search" class="input-mysize" />

    <div id="listNav" style="height: 370px; border: 1px solid; overflow: auto; margin-right: 20px; width: 90%;">
    </div>
</div>

JS in Html：

 $(function() {

     function onSuccess(row, container) {
        container.append('<div style="border:1px solid; cursor: hand; cursor: pointer;" >' +

                                '<table border="0">' +
                                    '<tr>' +
                                    '<td id="Location' + row.Id + '">'+
                                            '<b>Name: </b>' + row.Name + '</br >' + '<b>Address: </b>' + row.Address + '' +
                                    '</td>' +
                                    '<td onclick="locationDetails(' + row.Id + ')"> > </td>' + 
                                    '</tr>' +
                                '</table>' +
                         '</div>');

        var tdId = "Location" + row.Id;
        var element = $('#' + tdId);
        $(element).click(function() {
            google.maps.event.trigger(arrMarkers[row.Id], 'click');
        });
    };

    //...
    $('#listNav').empty();
    $('#listNav').jScroller("/Dashboard/GetClients", {
        numberOfRowsToRetrieve: 7,
        onSuccessCallback: onSuccess,
        onErrorCallback: function () {
            alert("error");
        }
    });

    //...

     $('#Search').keyup(function(){
        clearTimeout(typingTimer);
        if ($('#myInput').val) {
            typingTimer = setTimeout(doneTyping, doneTypingInterval);
        }
    });

    function doneTyping () {
        startInt = startInt + 5;
        $('#listNav').empty();
        $('#listNav').unbind();
        $('#listNav').jScroller("/Dashboard/GetClients", {
            numberOfRowsToRetrieve: 7,
            start : startInt,
            locationFilter: $('#Search').val(),
            onSuccessCallback: onSuccess,
            onErrorCallback: function () {
                alert("error");
            }
        });
    };
});

JS的其余部分（基于jScroller插件）：

(function ($) {
"use strict";
jQuery.fn.jScroller = function (store, parameters) {

    var defaults = {
        numberOfRowsToRetrieve: 10,
        locationFilter: '',
        onSuccessCallback: function (row, container) { },
        onErrorCallback: function (thrownError) { window.alert('An error occurred while trying to retrive data from store'); },
        onTimeOutCallback: function () { },
        timeOut: 3 * 1000,
        autoIncreaseTimeOut: 1000,
        retryOnTimeOut: false,
        loadingButtonText: 'Loading...',
        loadMoreButtonText: 'Load more',
        fullListText: 'There is no more items to show',
        extraParams: null
    };
    var options = jQuery.extend(defaults, parameters);
    var list = jQuery(this),
        end = false,
        loadingByScroll = true;

    var ajaxParameters;

    if (options.extraParams === null) {
        ajaxParameters = {
            start: 0,
            numberOfRowsToRetrieve: options.numberOfRowsToRetrieve,
            locationFilter: options.locationFilter
        };
    }
    else {
        ajaxParameters = {
            start: 0,
            numberOfRowsToRetrieve: options.numberOfRowsToRetrieve,
            locationFilter: option.locationFilter,
            extraParams: options.extraParams
        };
    }

    list.html('');

    function loadItems() {
        preLoad();
        jQuery.ajax({
            url: store,
            type: "POST",
            data: ajaxParameters,
            timeOut: options.timeOut,
            success: function (response) {
                list.find("#jscroll-loading").remove();
                if (response.Success === false) {
                    options.onErrorCallback(list, response.Message);
                    return;
                }
                for (var i = 0; i < response.data.length; i++) {
                    if (end === false) {
                        options.onSuccessCallback(response.data[i], list);
                    }
                }
                if (loadingByScroll === false) {
                    if (end === false) {
                        list.append('<div><a class="jscroll-loadmore">' + options.loadMoreButtonText + '</a></div>');
                    }
                }

                ajaxParameters.start = ajaxParameters.start + options.numberOfRowsToRetrieve;

                if (ajaxParameters.start >= response.total) {
                    end = true;
                    list.find('#jscroll-fulllist').remove();
                    list.find(".jscroll-loadmore").parent("div").remove();
                }
            },
            error: function (xhr, ajaxOptions, thrownError) {
                if (thrownError === 'timeout') {
                    options.onTimeOutCallback();

                    if (options.retryOnTimeOut) {
                        options.timeOut = options.timeOut + (1 * options.autoIncreaseTimeOut);
                        loadItems();
                    }
                }
                else {
                    options.onErrorCallback(thrownError);
                }
            }
        });
    }

    function preLoad() {
        if (list.find("#jscroll-loading").length === 0) {
            list.find(".jscroll-loadmore").parent("div").remove();
            list.append('<a id="jscroll-loading">' + options.loadingButtonText + '</a>');
        }
    }

    //called when doneTyping is called and first time page loaded 
    jQuery(document).ready(function () {
        loadItems();
    });


    //called when user scrolls down in a div
    $('#listNav').bind('scroll', function () {
        if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
            loadItems();
        }
    });

};
})(jQuery);

它主要是工作，但在某些情况下，当用户停止输入时，

jQuery(document).ready(function () {
    loadItems();
});

和

$('#listNav').bind('scroll', function () {
    if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
        loadItems();
    }
});

都被称为，而不仅仅是第一个，将坏的html添加到div。大多数情况下只调用jQuery（document）.ready，这就是我需要的东西。

为什么每次调用doneTyping（）时都会调用jQuery（document）.ready（）？我虽然应该在DOM准备好后第一次加载页面时调用它。

Answer 1

我认为JS中的HTML代码以$(document).ready({})开头，因此无需在插件中添加$(document).ready({})。只需在没有文档就绪事件的情况下调用loadItems();即可。

在jQuery插件函数中绑定函数

1 个答案: