Как вызвать функцию один раз, после фокусировки на элементе ввода?
Я хочу вызвать функцию только один раз при фокусировке на элементе ввода. Следующий код вызывает функцию в бесконечном цикле.
<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. Если вы видите, это будет работать для первого раунда. Но если вы все еще сосредоточены, они ничего не сделают, но если вы все еще сосредоточитесь, это сработает для хитрости.
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"/>