Link to home
Start Free TrialLog in
Avatar of MJ
MJFlag for United States of America

asked on

How to Attach/Remove Click Event Listener to Button Element Dynamically

This is related to a recent question I posted, regarding the below code:
<div class="toggle-fieldView">
        <button type="button" data-value="Fund Now" class="">FUND NOW</button>
        <button type="button" data-value="Fund Later" class="active">FUND LATER</button>
</div>

Open in new window

This button element is loaded dynamically in the user flow after a specific view is displayed. How do I dynamically attach the "click" event to these two buttons?  I want to monitor when they are clicked but I want to remove the listener once the view changes? This is what I'm currently testing with but I need to be able to attach and then remove the listener? How do I do this?
    function _dtmCheckOAO4FundingMethod(){
        document.body.addEventListener('click', function(event) { //Need to fix and attach when needed
	        if((event.target.dataset)&&(event.target.type == "button")){ 
                if(event.target.dataset.value == "Fund Now"){
                    sessionStorage.setItem("_dtmFundType", "fund now");
                    sessionStorage.setItem("_dtmFundTypeDetail", ":Funding Method:fund within 30 days");
                }
                if(event.target.dataset.value == "Fund Later"){
                    sessionStorage.setItem("_dtmFundType", "fund later");
                     sessionStorage.setItem("_dtmFundTypeDetail", ":Funding Method:Credit Card");
                }
            }
        });
    };

Open in new window

I'm assuming that I 'd have to have two different assignments (one for each button) and manage separately?
Thanks!
Avatar of leakim971
leakim971
Flag of Guadeloupe image

You just need to use a flag :
    var flag = false;
    function _dtmCheckOAO4FundingMethod(){
        if(flag == true) // if true
                return;  // do nothing, exit
        document.body.addEventListener('click', function(event) { //Need to fix and attach when needed
	        if((event.target.dataset)&&(event.target.type == "button")){ 

Open in new window


var flag = false;
function _dtmCheckOAO4FundingMethod(){
    document.body.addEventListener('click', function(event) { //Need to fix and attach when needed
        if( flag )
            return;
        var target = event.target;
        if( target.dataset && (target.type == "button") ) {
            var value = target.dataset;
            switch (value) {
                case "Fund Now" :
                    sessionStorage.setItem("_dtmFundType", "fund now");
                    sessionStorage.setItem("_dtmFundTypeDetail", ":Funding Method:fund within 30 days");
                    flag = true;
                    break;
                case "Fund Later" :
                    sessionStorage.setItem("_dtmFundType", "fund later");
                    sessionStorage.setItem("_dtmFundTypeDetail", ":Funding Method:Credit Card");
                    flag = true;
                    break;
            }
        }
    });
};

Open in new window

Avatar of MJ

ASKER

Hi Leakim,
But the event listener would still be active. Wouldn't it be better to remove the listener?
ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of MJ

ASKER

Thank you again Sir!