如何在bind方法中禁用函数执行？

Question

I've three simple functions

var loadPoints = function(successCallback, errorCallback) {
    $.ajax({
        method: 'get',
        url: '/admin/graph/get-points',
        dataType: 'json',
        success: successCallback,
        error: errorCallback
    });

}

var successLoadPoints = function(points){
  console.log('load ok');
  //console.log(points);
//  $.each(points,function(i, item){
//      console.log(points[i]);
//      
//  });

}
var errorLoadPoints = function ()
{
    console.log('error with loading points');
}

I bind function loadPoints to click event on button

$("button#viewPoints").bind(
                    'click', loadPoints(successLoadPoints,errorLoadPoints)
                    );

But function loadPoints is been executed without click event. Why? How to resolve this problem ?

Answer 1

Your current code is calling loadPoints when you want to bind it, triggering the ajax request immediately.

Your function should return a click handler function which will use the passed handlers for success and error. This returned function will be called on click.

var loadPoints = function(successCallback, errorCallback) {
    return function (event) {
        $.ajax({
            method: 'get',
            url: '/admin/graph/get-points',
            dataType: 'json',
            success: successCallback,
            error: errorCallback
        });
    };
}

$("button#viewpoints").on("click", loadPoints(successHandler, errorHandler));