jquery - jqueryのイベントクリック時の関数は、ページロード時に実行されます

Question

ページロード時に関数が実行されるのはなぜですか? ページの読み込み時に各ボタンが 1 回クリックされたかのように、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を2回書く必要がないように、どうすればこれを書き直すことができますか? this.id ?

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

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

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

質問がステートメントを2回書き直さずに行う方法を尋ねたという事実に注意してください（他の回答はありません...）、コードをよりきれいにするために1つの関数に割り当てられた単一の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;
});

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) として関数を呼び出します。

jquery - jqueryのイベントクリック時の関数は、ページロード時に実行されます

6 に答える 6

Related

Reference