Question

为什么在页面加载上运行函数？我看到4个警报，好像在页面加载时每个按钮被点击一次。

//Leaderboard switch alltime-week
$("#leader_all_time_btn").on("click", leadboard_switch_period("#leader_all_time_btn"));
$("#leader_month_btn").on("click", leadboard_switch_period("#leader_month_btn"));
$("#leader_week_btn").on("click", leadboard_switch_period("#leader_week_btn"));
$("#leader_day_btn").on("click", leadboard_switch_period("#leader_day_btn"));


//This is for above
function leadboard_switch_period(btn_id) {
    $("#leaderboard_nav a").removeClass("active_lb_btn");
    alert("yes");
    return false;
}

此外，因为我正在开题:) $("#leader_month_btn").on("click", leadboard_switch_period("#leader_month_btn"));

我怎样才能重写这个，这样我就不必再写两次按钮id了？ this.id？

Answer 1

您在绑定时调用leadboard_switch_period函数。这意味着它的返回值会传递给.on()，而实际上您需要传递对函数的引用。

您可以让leadboard_switch_period函数返回一个将用作事件处理程序的函数：

function leadboard_switch_period(btn_id) {
    return function () {
        $("#leaderboard_nav a").removeClass("active_lb_btn");
        alert("yes");
        return false;
    };
}

Answer 2

$("#leader_all_time_btn").on("click", leadboard_switch_period("#leader_all_time_btn"))立即调用此功能。你应该用

替换它

$("#leader_all_time_btn").on("click", function(){
    //inside this function $("#leader_all_time_btn") is this
    leadboard_switch_period(this)
})

Answer 3

你错过了你没有的功能

$("#leader_all_time_btn").on("click", function() {
  leadboard_switch_period($(this));
});

Answer 4

请注意这个问题是如何在不重写语句两次的情况下完成它（没有其他答案已经完成......），你可以在一个jQuery选择器中执行此操作，分配给一个函数来使你的代码清理。

$("#leader_all_time_btn, #leader_month_btn, #leader_week_btn, #leader_day_btn").on("click", function() {
    alert("#" + this.id); // Get the ID of the button that was clicked and add a hashtag, or $(this) for the whole element.
    $("#leaderboard_nav a").removeClass("active_lb_btn");
    return false;
});

Answer 5

jquery .on（）方法需要一个选择器和一个回调（在这种情况下），你实际上是在传递一个函数执行的结果，这就是为什么它在启动时调用了4次，你想要的是类似的东西：

$("#leader_all_time_btn").on("click", leadboard_switch_period);

function leadboard_switch_period(ev) {
  ev.preventDefault(); // If instead of a button you use a link, but dont want the default behavior
  var btn_id = this.id; // this refers to the clicked button
}

请注意，通过将“leadboard_switch_period”传递给.on方法，您将回调函数传递给该函数，而在执行“leadboard_switch_period（bla）”时，您实际上正在调用该函数并将其结果传递给.on方法。

单击元素时，jQuery将调用您的函数，将事件作为第一个参数，将单击的元素作为上下文对象（this）。

Answer 6

      $(document).ready(function(){

      //Leaderboard switch alltime-week
      $("#leader_all_time_btn").on("click", leadboard_switch_period("#leader_all_time_btn"));  
      $("#leader_month_btn").on("click", leadboard_switch_period("#leader_month_btn"));
      $("#leader_week_btn").on("click", leadboard_switch_period("#leader_week_btn"));
      $("#leader_day_btn").on("click", leadboard_switch_period("#leader_day_btn"));


    });

    //This function need to be invoked on function call..
    //You can even call from jquery event....
     function leadboard_switch_period(btn_id) {
     $("#leaderboard_nav a").removeClass("active_lb_btn");
     alert("yes");
     return false;
     }

在jquery上单击事件的函数在页面加载时运行

6 个答案: