Remove addListener (Event from Google Analytics) from element

Question

I am launching an event to google analytics every time the user chooses a different select option. But when the user clicks again on the select event is fired again. I'm trying to remove the element event after the user chooses the option. I've tried unbind() and off() but is not working. Can anyone help me please?

JS:

$('#estado').change(function(){
     var getEstado = $('#estado option:selected').val();
     var getEstadoDesc = $('#estado option:selected').text();

     var homeEstado = document.getElementById('estado');
     addListener(homeEstado, 'click', function() {
         ga('send', 'event', 'Busca', 'Estado', getEstadoDesc);
         removeEventHandler(homeEstado, 'click');
     });

     function addListener(element, type, callback) {
        if (element.addEventListener) element.addEventListener(type, callback);
        else if (element.attachEvent) element.attachEvent('on' + type, callback);
     }

     function removeEventHandler(element, type, callback) {
         if (element.removeEventListener) element.removeEventListener(type,callback);
         else if (element.detachEvent) element.detachEvent('on' + type, callback); 
     }

     $.ajax({  
         type: 'POST',
         data: {estado: getEstado},
         url: './ajax/get_cidade.php',
         beforeSend: function(data){

         },
         success: function(data){
             $('#load-cursos').html(data);
         },
     });
 });

Answer 1

I just make a alter to your code, please see if that is what you want.

 var selecEvent = function(){ var getEstado = $('#estado option:selected').val(); var getEstadoDesc = $('#estado option:selected').text(); function addListener(element, type, callback) { if (element.addEventListener) element.addEventListener(type, callback); else if (element.attachEvent) element.attachEvent('on' + type, callback); } function removeListener(element, type, callback) { if (element.addEventListener) element.removeEventListener(type, callback); else if (element.attachEvent) element.detachEvent('on' + type, callback); } var homeEstado = document.getElementById('estado'); var sendFunction = function() { alert('Selected ' + getEstadoDesc + ' with value ' + getEstado); removeListener(homeEstado, 'click', sendFunction); }; addListener(homeEstado, 'click', sendFunction); // Stop listen to any changes to prevent multiple ajax call and alerts... etc. $('#estado').off(); setTimeout(function() { alert('Select changed'); // Now every thing done. Event sent, content load, we can listen to select again. $('#estado').change(selecEvent); }, 3000); } $('#estado').change(selecEvent); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="estado"> <option value="a">A</option> <option value="b">B</option> <option value="c">C</option> <option value="d">D</option> </select> 

removeListener or detachEvent, form document, needs a function to remove, so I have to alter the execute ga to a simple alert function. And altered ajax to a settimeout to simulate ajax delay.

Take to look to see if I misunderstood something?