Добавить OnClick динамически с помощью JavaScript получить несколько же действие

Question

Может быть, я не могу писать весь код здесь, но я думаю, что это может объяснить моя проблема:

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 казнены 5 раз (я хочу, чтобы выполнить его 1 раз) не удаляя обхвата для дела мне нужно для моего случая? Я пытаюсь удалить событие onClick, но не работает.

Спасибо

Answer 1

(я не знаю, почему вы действительно нужно прикрепить событие внутри для цикла), но вы можете 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>