にはJavaScriptを有効にし

Question

たぶん私はここにすべてのコードを書くことはできませんが、私はこれがあると思い複数の同じアクションを取得し使用することは私の問題を説明することができ、動的のonClickを追加します。

for(var i = 0 ; i < 5 ; i++) { 
 
    $('#mybutton').on('click', function() { return false; }); 
 
    $('#mybutton').on('click', function() { myfunction('123') }); 
 
} 
 

 
function myfunction(text){ 
 
    console.log(text); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button id = 'mybutton'> My Button </button>

そして結果：

myfunctionが5回実行されます。

私の質問はです：

のMyFunctionを避けるために、どのように私は私の場合のためにそれを必要とする原因をループ削除せずに（私はそれを1回実行したい）5回実行？私はonClickイベントを削除しようとしますが、動作しません。

は

Answer 1

（あなたが本当にforループ内のイベントを添付する必要がある理由私はよく分からない）がありますが、接続する前に、クリックイベントをdettachことができ次はjQueryメソッドを使用して.off()です。

off()：は、イベントハンドラを削除します。

例：

$('#mybutton').off('click').on('click', function() { myfunction('123') }); 

・ホープ、このことができます。

for(var i = 0 ; i < 5 ; i++) { 
 
    $('#mybutton').off('click').on('click', function() { myfunction('123') }); 
 
} 
 

 
function myfunction(text){ 
 
    console.log(text); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button id = 'mybutton'> My Button </button>

Answer 2

は以下のようにそれを実行してくださいありがとう：

for(var i = 0 ; i < 5 ; i++) { 
    $('#mybutton').on('click', function() { return false; }); 
    if (i == 0) 
     $('#mybutton').on('click', function() { myfunction('123') }); 
} 

Answer 3

次のロジックを改善することができます：

const myfunction = function (a) {console.log(a)}; 
 

 
const callback1 = function() { return false; }; 
 
const callback2= function() { myfunction('123') }; 
 

 
$('#mybutton').on('click', function (event) { 
 
    for (var i=0 ; i<=5 ; i++) { 
 
     callback1(); 
 
     callback2(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button id="mybutton">click me</button>

Answer 4

オーバーエンジニアリングよりダイナミック&エレガント&何かを持っているために、あなたはTasks CLASを使用することができますすべてのコールバックは、同じ引数を受け取ると仮定すると、以下のようにS：

class Tasks { 
 
    constructor(...tasks) { 
 
    this.tasks = tasks; 
 
    } 
 
    
 
    run(times, ...args) { 
 
    return Array.from({length: times}, (v, k) => k+1).map(iteration => 
 
     this.tasks.map(task => task(...args))     ) 
 

 
    } 
 

 
} 
 

 
const myfunction = function (a) {console.log(a)}; 
 
const callback1 = function() { return false; }; 
 
const callback2= function() { myfunction('123') }; 
 

 

 
$('#mybutton').on('click', function (event) { 
 
    new Tasks(callback1, callback2) 
 
     .run(5, event); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="mybutton">click me</button>