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

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 () {
  /开发者_如何学JAVA/ 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.

$(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('');

    });

});

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.

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?

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
});

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.

• 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.