Question

我有这个简单的JS代码，在单击某些HTML元素时执行AJAX请求。至少，这是他们想要做的事情。出于某种原因，我列出的每个URL都会在页面加载时被触发，而不是在单击元素时触发

function challenge_stuff(url) {
    $.ajax({
        url:url,
        success:function(result){
            $("#challenge_stuff").html(result);
        }
    });
}

$("#cancel").click(challenge_stuff("../cancel_challenge"));
$("#accept").click(challenge_stuff("../accept_challenge"));
$("#decline").click(challenge_stuff("../decline_challenge"));
$("#wonMatch").click(challenge_stuff("../won_match"));
$("#lostMatch").click(challenge_stuff("../lost_match"));
$("#confirm_win").click(challenge_stuff("../confirm_win"));

Answer 1

使用

$("#cancel").click(function() {challenge_stuff("../cancel_challenge")});

代替。

Answer 2

您传递的是challenge_stuff函数执行的结果，而不是函数本身。

Answer 3

您可以使用Function.bind将适当的参数绑定到challenge_stuff函数：

$("#cancel").click(challenge_stuff.bind(null, "../cancel_challenge"));
$("#accept").click(challenge_stuff.bind(null, "../accept_challenge"));
$("#decline").click(challenge_stuff.bind(null, "../decline_challenge"));
$("#wonMatch").click(challenge_stuff.bind(null, "../won_match"));
$("#lostMatch").click(challenge_stuff.bind(null, "../lost_match"));
$("#confirm_win").click(challenge_stuff.bind(null, "../confirm_win"));

但是，我认为更明智的方法是：

function challenge_stuff() {
    var url = $(this).data('url');

    $.ajax({
        url:url,
        success:function(result){
            $("#challenge_stuff").html(result);
        }
    });
}

$('.challenge-btn').click(challenge_stuff);

在你的HTML中：

<a class="challenge-btn" data-url="../cancel_challenge">Cancel</a>
<a class="challenge-btn" data-url="../accept_challenge">Accept</a>
<a class="challenge-btn" data-url="../decline_challenge">Decline</a>
<a class="challenge-btn" data-url="../won_match">Won Match</a>
<a class="challenge-btn" data-url="../lost_match">Lost Match</a>
<a class="challenge-btn" data-url="../confirm_win">Confirm Win</a>

Answer 4

将您的功能更改为此功能，并且您已全部设置：

function challenge_stuff(url) {
    // v---return your handler!
    return function() {
        $.ajax({
            url:url,
            success:function(result){
                $("#challenge_stuff").html(result);
            }
        });
    }
}

现在它返回一个将被指定为处理程序的函数。这比手动为每次调用添加匿名函数更方便。

虽然这部分可以保持不变：

$("#cancel").click(challenge_stuff("../cancel_challenge"));
$("#accept").click(challenge_stuff("../accept_challenge"));
$("#decline").click(challenge_stuff("../decline_challenge"));
$("#wonMatch").click(challenge_stuff("../won_match"));
$("#lostMatch").click(challenge_stuff("../lost_match"));
$("#confirm_win").click(challenge_stuff("../confirm_win"));

你可以这样缩短它：

var ids = {
    cancel: "cancel_challenge",
    accept: "accept_challenge",
    decline: "decline_challenge",
    wonMatch: "won_match",
    lostMatch: "lost_match",
    confirm_win: "confirm_win"
}
$.each(ids, function(id, url) {
    $("#" + id).click(challenge_stuff("../" + url));
});

如果ID和url目录共享相同的名称，则可能更短。然后你可以使用一个数组，并在两个地方使用相同的值。

// Make sure the ID and path are set up to be identical
var id_path = ["cancel","accept","decline","won_match","lost_match","confirm_win"];
$.each(id_path, function(_, id) {
    $("#" + id).click(challenge_stuff("../" + id));
});

在DOM Ready上使用Javascript .click Listener Firing

4 个答案: