Как вызвать функцию один раз, после фокусировки на элементе ввода?

Я хочу вызвать функцию только один раз при фокусировке на элементе ввода. Следующий код вызывает функцию в бесконечном цикле.

<input type="text" class="dateRangeEducLev">
$(document).on("focusin",".dateRangeEducLev",function(e){    
    alert("focusIn");
});

Я мог бы изменить событие на "onClick", но оно вызывало бы функцию каждый раз, когда пользователь щелкает элемент ввода, даже если элемент ввода уже выбран. Это не желательно.

Я пытался обойти эту проблему, предотвращая распространение, но она не работает. это код:

$(document).on("focusin",".dateRangeEducLev",function(e){    
    alert("focusIn");
    e.stopPropagation();
});

http://jsfiddle.net/r1b06udo/1/

Любая идея, как остановить распространение или ограничить функцию, которая будет вызываться только один раз?

Обновление: если я использую off() или one(), перестану вызывать функцию навсегда, пока браузер не обновится. Другая проблема заключается в том, что если у меня будет более одного элемента одного класса, функция будет отключена для них.

http://jsfiddle.net/r1b06udo/2/

У меня есть новое обновление. Я выбираю unbind и bind. Если вы видите, это будет работать для первого раунда. Но если вы все еще сосредоточены, они ничего не сделают, но если вы все еще сосредоточитесь, это сработает для хитрости.

http://jsfiddle.net/456at7y8/

2 ответа

Решение

Ты можешь позвонить off в вашем обработчике focusin, чтобы запретить повторный вызов этого обработчика

$(document).on("focusin",".dateRangeEducLev",function(e){    
    alert("focusIn");
    $(document).off("focusin",".dateRangeEducLev");
});

призвание one это другой вариант, как указано другим. Проблема в том, что я не знаю, что вы можете использовать его с делегированными событиями, как вы делаете с on, Вот почему я предложил этот подход.

Делегированные события кажутся ненужными в зависимости от того, что вы показываете, в любом случае я старался сохранить это на всякий случай.

Используйте один (), чтобы связать событие

$(".demo1").on("focusin",function(e){    
    alert("focusIn");
    $( this).unbind( "focusin" );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="dateRangeEducLev demo1"/>
    
<input type="text" class="dateRangeEducLev demo1"/>
<input type="text" class="dateRangeEducLev demo1"/>

Другие вопросы по тегам