1

I want to trigger a function only one time at focusin in a element input. The follow code calls the function in a infinite loop.

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

I could change the event to "onClick" but it would calls the function each time the user click in a input element even if the input element is already selected. This is not desirable.

I was trying to workaround this problem preventing propagation but it is not working. this is the code:

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

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

Any idea in how to stop propagation or restrict the function to be called only once?

Update: If I use off() or one() will stop to call the function forever until the browser refresh. Another problem is if I have more then one element with same class the function will be disabled for them.

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

I have a new update. I choose unbind and bind. If you see it will work for the first round. But if you still focusin they will do nothing, but if you still focusin it will work for a wile.

http://jsfiddle.net/456at7y8/

IgorAlves
  • 5,086
  • 10
  • 52
  • 83
  • use one() to bind the event .it will work only one time – yugi Dec 23 '14 at 02:41
  • Hi yugi, almost there. Your idea works good. The problem is when the user click out of input element and click in, the function will not be called. The event is disabled forever untill the browser refresh. The other problem is, if I have more than one element the 'one()' will disable the function for the others. I will update my question. – IgorAlves Dec 23 '14 at 02:51
  • hi @zwitteron .i updated my answer .it working fine now.please check that. – yugi Dec 23 '14 at 03:30
  • Hi yugi, the function still disabled. For example: if click input one->alert, then if click input2->alert if click input3->alert. But if click one of then again, the focusin was disabled untill the browser restart. – IgorAlves Dec 23 '14 at 03:57
  • Hi yugi. Can you see please my 3 update? The answer is not there yet, but it is on the way. – IgorAlves Dec 23 '14 at 04:21
  • hi @zwitteron i am not understand what is your new requirement.can you explain. http://jsfiddle.net/yugi47/30v4rewt/2/ please check this link – yugi Dec 23 '14 at 04:35
  • Hi yugi, I think that is my english. I mean, after you unbind "focusin" from all the 3 input elements, if you try to foucsin on the first one again, the bind was lost. It will not show the alert message again, because it lost the bind foucsin event. So in fact, I think the algorithm must unbind after alert message and bind again for further focusin events. – IgorAlves Dec 23 '14 at 04:45
  • hi @zwitterion ,you mean again you need bind the event to input element .? – yugi Dec 23 '14 at 04:50
  • yes. The user could focusin later, and should see the alert message again. This is why I am trying to unbind and bind later. See my last attempt http://jsfiddle.net/456at7y8/1/ – IgorAlves Dec 23 '14 at 04:53
  • @zwitterion.ok when you want again bind the event.after focusout right? – yugi Dec 23 '14 at 05:04
  • yes. Every time the element is focus out, bind again. – IgorAlves Dec 23 '14 at 05:09
  • If you try my last update jsfiddle.net/456at7y8/1 you will see that I am almost there. That means, I can bind again after focusout. But there is something wrong. It seems it bind again in a random order. – IgorAlves Dec 23 '14 at 05:15

2 Answers2

1

You can call off on your focusin handler to disallow this handler to be called again

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

Calling one is the other option as other pointed out. The problem is that I'm not aware that you can use it with delegated events as you are doing with on. That's why I suggested this approach.

Delegated events seems unnecessary according what you show, in any case I tried to keep it just in case.

Claudio Redi
  • 67,454
  • 15
  • 130
  • 155
1

use one() to bind the event

$(".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"/>
yugi
  • 834
  • 1
  • 15
  • 28