How to remove previously bind event in jquery

Question

On a checkbox change event, one of a javascript bind the toggle action.

Later on(in a different script) I want to change toggle action based on a condition.

Ex. script 1:

$(document).ready(function () {
    var shipFields = $('.address1 input');

    $("input[name = 'same_as_bill']").on("change", function (evt) {
        toggleFields(shipFields, !$(this).is(":checked"));
    });

   function toggleFields(fields, show) {
        var inputFields = $("li", fields).not(".sameas, .triggerWrap");
        inputFields.toggle(show);
    }
}

Script 2:

$(document).ready(function () {

    $('li.sameas input').click(function (sender) {

          var target = $(sender.target);
          var selectedCountryValue = $('li.country select', target.closest('fieldset')).val();

          // determine data method based on country selected
          if (selectedCountryValue === "xxx") {
              ShowAddress(true, target);
          } else {
             ShowAddress(false, target);
          }
    });

    function kleberShowAddress(show, target) {
          if (show) {
               $('li.address).hide();
          } else {
               $('li.address).show();
          }
     }
});

Issue I have here is, my site load the script 1 first and then the script 2. So by the time script 2 performs the action, toggle action is queued and will trigger that after the changes from script 2, that will revert the changes which I want.

Is there a way to remove the action in the queue? or stop happening first request. I do not want to use .unbind() which will stop triggering script 1 function. I just want to stop the action when ever it meets the condition in script 2.

Please note: above functions are trimmed to show less codes.

you might consider using event.stopimmediatePropogation(), which stops executing further events binded to the currentelement ...can you also please include your markup — Geeky, Oct 17 '16 at 03:55
you may be able to get some idea from this [post](http://stackoverflow.com/questions/209029/best-way-to-remove-an-event-handler-in-jquery) — Lahiru Ashan, Oct 17 '16 at 04:13

score 1 · Answer 1 · answered Oct 17 '16 at 04:28

add var isActive = true; and use it to check in first script. In script 2, you can call isActive = false any time you want to disable the first script's function or isActive = true for re-enable them.

Your code will look like:

//script1    
var isActive = true;
$(document).ready(function() {
    var shipFields = $('.address1 input');

    $("input[name = 'same_as_bill']").on("change", function(evt) {
        if (isActive) {
            toggleFields(shipFields, !$(this).is(":checked"));
        }
    });

    function toggleFields(fields, show) {
        if (isActive) {
            var inputFields = $("li", fields).not(".sameas, .triggerWrap");
            inputFields.toggle(show);
        }
    }
});

//script2
$(document).ready(function() {
    isActive = false;

    $('li.sameas input').click(function(sender) {

        var target = $(sender.target);
        var selectedCountryValue = $('li.country select', target.closest('fieldset')).val();

        // determine data method based on country selected
        if (selectedCountryValue === "xxx") {
            ShowAddress(true, target);
        } else {
            ShowAddress(false, target);
        }
    });

    function kleberShowAddress(show, target) {
        if (show) {
            $('li.address').hide();
        } else {
            $('li.address').show();
        }
    }
});

Good Idea, but you are making it a global variable, which i think is not the best solution — Geeky, Oct 17 '16 at 05:25
I found the related question but it's look like has the same solution here. http://stackoverflow.com/questions/3408082/jquery-temporary-unbinding-events — Jared Chu, Oct 17 '16 at 05:40
Yes this is a good idea, I will try this with global variable. Thanks a lot — Ash, Oct 17 '16 at 05:43

How to remove previously bind event in jquery

1 Answers1