Question

I have this javascript routine for ajax call, which works for the most part. I need to know the method of unbinding the click behavior to a div.

The structure of my routine is like this:

1. call ajax to search if the input is good or not, get response back from php. Result can be either Yes or No.

2. If result is Yes, change the color of a holder div as a visual cue, allow user to doubleclick on the div to run another function. If not, don’t allow doubleclick div and don’t run another function.

Easy right? Except that when the first ajax call yields a ‘Yes’ result, and then the user perform a second ajax call and it yields a ‘No’ result, the user can still dblclick on ‘No’ result and perform the action intended for a ‘Yes’ result. I have figured out that the initial ‘Yes’ result will assign the ‘ondblclick’ behavior to the holder div, and the follow up ‘No’ result does not have the code to unbind the div from dblclick behavior. I have figured out how to unbind that ‘dblclick’ behavior using jquery. But for reasons that is too long to explain (mainly due to having a ‘.’ in id names), I need to use regular javascript to unbind. What is the ‘unbind’ syntax using regular JS?

TIA

My code:

if (s == "Yes" ) { 

document.getElementById(divid).className = "tl1";
var data = result;

    document.getElementById(divid).ondblclick = function() {
    save (data);
    };
    //how to unbind divid from ondblclick using regular JS?
}
else {
//alert ("s is No");
document.getElementById(divid).className = "tl2";
         }

Answer 1

What you’re looking for is addEventListener() and removeEventListener(). However, these only works in modern browsers.