CODEWITHSUNDEEP
javascriptgoogle-chrome-extensioncontent-script
noam suissa
noam suissa

Reputation: 468

How to unbind within a bind event

I am developing a feature in a chrome extension that allows the user to hover over and detect any element on the page. A select button on the top right of the page activates the feature. Whenever an element is clicked on, an input box near the button gets filled with that element's innerHTML. After the click, the selection should stop and clicking will no longer be recognized by the feature. Everything works fine but I am unable to unbind the clicking event. Is there anything wrong with my code? Please let me know

content.js

window.onload = () => {

    var highlight = function (event){
        if(!$(event.target).is("#home_container *")){
            event.target.style.backgroundColor = "rgba(121, 204, 255, 0.4)";
        }
    }
    var remove = function (event){
        if(!$(event.target).is("#home_container *")){
            event.target.style.backgroundColor = "";
        }
    }

    var disableLinks = function (event){
        event.preventDefault();
    }

    var highlightProcess = function(event) {
        $('a').bind("click", disableLinks);
        $(document).bind("mouseover", highlight);
        $(document).bind("mouseout", remove);
        $(document).bind("click", (elem) => {
            if(!$(elem.target).is("#home_container *")){
                $("#input_box").val(elem.target.innerHTML);
                remove(elem);
                $(document).unbind("mouseover", highlight); //<-- works
                $(document).unbind("mouseout", remove); //<-- works
                $('a').unbind("click", disableLinks); //<-- works
                $(this).unbind("click"); //<-- this does not work
            }
        });
    }
    document.getElementById('st_select_element_button').addEventListener("click", highlightProcess);
}

Upvotes: 0

Views: 159

Answers (2)

ishay m
ishay m

Reputation: 189

You can change the highlightProcess to arrow function and then 'this' will refer to the document : 

var highlightProcess = (event) => {...}

Upvotes: 1

noam suissa
noam suissa

Reputation: 468

Solved

changed 

$(this).unbind("click");

to

$(document).unbind("click");

Upvotes: 0

Related Questions