hinzufügen onClick mehr mit bekommen JavaScript dynamisch gleicher Aktion

Question

Vielleicht kann ich die gesamten Code hier nicht schreiben, aber ich denke, das kann mein Problem ist, erklären:

Und das Ergebnis

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>

:

Ich bekomme myfunction 5 mal ausgeführt.

Meine Frage ist:

Wie myfunction ausgeführt 5mal zu vermeiden (ich will es 1 Mal ausführen) ohne Entfernen für weil ich es brauche für meinen Fall Looping? Ich versuche, das onClick-Ereignis zu entfernen, funktioniert aber nicht.

Danke

Answer 1

(Ich bin mir nicht sicher, warum Sie wirklich Ereignis innerhalb der for-Schleife müssen anhängen), aber man könnte das Click-Ereignis dettach vor dem Anbringen nächste mit jQuery-Methode .off().

off(): einen Ereignishandler entfernen.

Beispiel:

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

Hoffnung, das hilft.

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

es wie unten Do:

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

Answer 3

Die folgende Logik kann besser sein:

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

Um etwas mehr Dynamik haben & elegante & over-engineered, können Sie Tasks cla verwenden s, wie folgend, vorausgesetzt, alle Rückrufe die gleichen Argumente erhalten:

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>