jQuery - イベントを設定するのではなく

Question

私はイメージリンクのリストを持っており、そのリンク上でonClickイベントをアクティブにしているボタンをコーディングする必要があります。だから、：

「ボタンをクリックせずに」：「ボタンをクリックした後」リンクをクリックすると、私たちに をリダイレクト：リンクをクリックすると、私たちの編集ダイアログを持参

ジャバスクリプト：（「＃設定-icoが」ボタンがあります）

eventsHandler  : function() { 

    var self = this; 

    // - - - - - - - - - - - - - - - - - - - - - - - - - - - - * 

    $("#settings-ico").on("click", function() { 

     $(".b-row > a").on("click", tileOpenDialog(event)); 
    }); 

    $("#tile-edit-save").on("click", tileEditSave()); 

    // - - - - - - - - - - - - - - - - - - - - - - - - - - - - * 

    function tileOpenDialog(event) { 

     event.preventDefault(); 
     let id = $(this).prop("id"); 
     this.editId = id; 
     $("#tile-edit").css("display", "block"); 
     console.log(id + ' click'); 
     alert(self.pageList); 
    } 
    function tileEditSave() {} 
} 

このボタンは "＃settings-ico"で、リンクをクリックせずにすぐに私の編集ダイアログが表示されます。

$("#tile-edit").css("display", "block");

しかし、私が欲しい、クリックされたリンクのいくつかの後、このダイアログを表示することです：

$(".b-row > a").on("click", tileOpenDialog(event)); 

これをコーディングする方法は？なぜボタンがクリックされた後に 'titleOpenDialog（）'がトリガされるのですか？

Answer 1

関数をコールバックとして渡すときに関数を呼び出すべきではありません。彼らが別の関数を返さない限り、私は推測します。あなたはやっている：

$(".b-row > a").on("click", tileOpenDialog(event)); 

あなたがやるべきこと：

// Passing in the named function so that it can be called 
// later once the button is clicked 
$(".b-row > a").on("click", tileOpenDialog); 

それとも、イベントオブジェクトを渡したい場合は明示的に行うことができた：

// Creating and passing in an anonymous function that will be 
// called later once the button is clicked, which will in turn 
// call the inner function. 
$(".b-row > a").on("click", function(event) { 
    tileOpenDialog(event) 
}); 

説明したように#settings-icoをクリックしたときに起きていることについて、基本的には、jQuery関数を実行していることをクリックすると.b-row > aを選択します。次に、戻り値に対して.on()メソッドを実行し、文字列"click"を渡してからtileOpenDialog(event)に実行します。後にかっこが付いているので、JavaScriptエンジンは最初にその関数を実行しなければなりません（なぜダイアログが開くのですか）。次に、.on()の2番目の引数として戻り値（undefined）が渡されます。