jquery - Function on event click in jquery runs on pageload

Question

How come function is run on pageload? I see 4 alerts, as if on page load each button is clicked once.

//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;
}

Also since I'm opening a topic :) $("#leader_month_btn").on("click", leadboard_switch_period("#leader_month_btn"));

how can I rewrite this, so that I don't have to write button id twice? this.id ?

score 0 · Accepted Answer

      $(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;
     }

score 0 · Accepted Answer

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)。

score 0 · Accepted Answer

您在绑定它时调用该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;
    };
}

score 0 · Accepted Answer

$("#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)
})

score 0 · Accepted Answer

你错过了功能位，不是吗？

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

score 0 · Accepted Answer

请注意，问题询问如何在不重写语句的情况下完成两次（没有其他答案做过......），您可以在单个 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;
});

jquery - Function on event click in jquery runs on pageload

6 回答 6

Related

Reference