Функция привязки в функции плагина jQuery

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 в 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 вызывается, , что мне нужно.

Также почему jQuery (document) .ready() вызывается каждый раз, когда вызывается doneTyping()? Я хочу, чтобы он был вызван только в первый раз, когда страница загружается после того, как DOM готов.

Answer 1

Я предполагаю, что ваш JS кода в вашем HTML начинается с $(document).ready({}), так что не было бы никакой необходимости добавлять $(document).ready({}) внутри ваш плагин. Просто позвоните loadItems(); без события готовности документа.