JQuery: Prevent other events from being fired when a specific action is taken

Question

As I mentioned in the title, I would like to prevent an event from being triggered when I fire another one:

Let's take this example:

 $(function() { $("#security_code").bind('change', function () { // Do validation and show errors }); $("#reloadCaptcha").bind('click', function () { // generate new captcha and clear 'secuirity code' field // clear the field so the user will enter the new generated security code document.getElementById('security_code').value = ''; }); });

PURPOSE: prevent the 'change' event from being fired when the '#reloadCaptcha' is clicked.

When I click the link (second event) the first event fires too (since 'change' activates). I am looking to stop all "change" events when a link is actually clicked. I hope I was clear enough. Does anyone have any ideas?

And yes, I've tried unbind, stopPropagation and other functions from the jQuery documentation, but it just didn't work.

Note that I only want to have the "change" freezed when I click that specific link. In other cases, it should work all the time.

Thanks in advance guys! I hope there is someone out there that can clarify this for me.

Is the code inside of the click handler for the #link_id element changing the value of the #username field, and thats why the change event fires? Just looking for clarification — Chris Cherry
– Chris Cherry, Commented Mar 20, 2011 at 22:33
Yes, the code is actually inside the click handler for #link_id: document.getElementById('security_code').value = ''; — Gabriel
– Gabriel, Commented Mar 20, 2011 at 22:43

timothyclifford · Accepted Answer · 2011-03-20 23:01:10Z

$(function() { $("#security_code").bind('change', function () { // If #security_code is empty do nothing if ($('#security_code').val() == '') { return; } // Otherwise validate... }); $("#reloadCaptcha").bind('click', function () { // generate new captcha and clear 'secuirity code' field // clear the field so the user will enter the new generated security code $('#security_code').val(''); }); });

It just doesn't work! it looks like the 'change' is fired before the 'click'! Thanks for all your replies guys. I can't believe this apparently tiny thing is causing me so much trouble.
this may be simple but have you tried moving your click event above your change event handling in code?

mattsven · Accepted Answer · 2011-03-20 22:33:48Z

0

Unless the code that fires when $("#link_id") is clicked is changing the element $("#username"), the change event shouldn't fire... But either way event.preventDefault() should do what you want.

answered Mar 20, 2011 at 22:33

mattsven

23.5k11 gold badges73 silver badges106 bronze badges

3 Comments

Gabriel Over a year ago

Actually, it does change it. I use a refresh image link that clears a security code field. The problem is: when I click refresh a new captcha is generated and the security code field is cleared so the user can enter a new code. But when it is cleared, the change event fires and it says that the code is incorrect and it looks unprofessional.

timothyclifford Over a year ago

i would have thought preventDefault() will only apply to the element within the bind() statement whereas in this case he is working across two separate elements?

Gabriel Over a year ago

Here's a new version of the code:<script type="text/javascript">  </script>

timothyclifford · Accepted Answer · 2011-03-20 22:38:58Z

From jQuery documentation:

To stop further handlers from executing after one bound using .live(), the handler must return false. Calling .stopPropagation() will not accomplish this.

Have you tried using .live() instead of .bind() and returning false?

Burak Erdem · Accepted Answer · 2011-03-20 22:44:16Z

It's hard to answer without seeing the whole code but maybe the following code would help. I know it's not a perfect solution but might help;

$("#username").bind('change', function () { if ( $('body').data('linkClicked') !== 1 ) { // Validate field when element loses focus } }); $("#link_id").bind('click', function () { $('body').data('linkClicked', 1); // Do something when the a specific link is clicked });

Many thanks for your reply! Just posted a new version of the code so you can understand better what I want.

Gabriel · Accepted Answer · 2011-03-20 22:49:41Z

Here's a new version of my code:

$(function() { $("#security_code").bind('change', function () { // Do validation and show errors }); $("#reloadCaptcha").bind('click', function () { // generate new captcha and clear 'secuirity code' field // clear the field so the user will enter the new generated security code document.getElementById('security_code').value = ''; }); });

PURPOSE: prevent the 'change' event from being fired when the '#reloadCaptcha' is clicked.

If in your click event you're resetting the value to nothing, in your change event can't you just tell it to skip validation if value is nothing? See my 2nd answer...
Correct, but it looks like the 'change' fires before the 'click' and it doesn't work!

Community · Accepted Answer · 2017-05-23 12:29:46Z

DEMO: http://jsbin.com/itire4/2

$(function() { $("#security_code").bind('change',function() { if ($(this).val() == 'something') { $(this).bind('change'); //do something else... } }); $("#reloadCaptcha").bind('click',function() { $("#security_code").val('').unbind('change'); }); });

PS: the one from timothyclifford is also good.

Collectives™ on Stack Overflow

JQuery: Prevent other events from being fired when a specific action is taken

6 Answers 6

2 Comments

3 Comments

Comments

1 Comment

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

3 Comments

Comments

1 Comment

2 Comments

Comments

Related