Jquery .on('click,'button' not working

Question

I need to check if user closed browser. There is no reliable way, but the most accurate way seems to use onbeforeunload and check if a link or a button was clicked. I will also add f5 and some other extra checking.

But I have problem with button. If I click button, ajax call will be made even if there is if(window.link_was_clicked==false) condition.

<button onclick="setLocation('http://dev.site.com/checkout/')" class="button" title="Checkout" type="button"><span><span>Checkout</span></span></button>

And script:

jQuery(document).on('click', 'button', function(event) {
  window.link_was_clicked= true;
});  

window.onbeforeunload = function() {
  if(window.link_was_clicked==false){                
    //make ajax call      
  }
};

It seems the problem is because there is setLocation function attached to button onclick. Is there any way to trigger jQuery(document).on first?

which button are you talking about? are you talking about the browser close button? — Sushil, Apr 10 '14 at 12:26
http://stackoverflow.com/questions/15277403/how-to-detect-if-a-link-was-clicked-when-window-onbeforeunload-is-triggered — Deepak Ingole, Apr 10 '14 at 12:28
Why not put your onclick code inside of your jQuery click handler, so it gets called in the same place and you have neater code? — Tricky12, Apr 10 '14 at 12:40
the only way i can see to make it work is by adding the onclick to the button in the old fashioned way (i wouldn't recommend though), `var btn = jQuery('button'); btn[0] && btn[0].onclick = function () {window.link_was_clicked = true; setLocation('http://dev.site.com/checkout/');};` something like this — Sushil, Apr 10 '14 at 12:49
try this [jsfiddle](http://jsfiddle.net/chhetrisushil/RM33L/) — Sushil, Apr 10 '14 at 12:55

score 0 · Answer 1 · answered Apr 10 '14 at 12:37

0

That variable doesnt exist on before load. so add it on the top and try again

     window.link_was_clicked=window.link_was_clicked||false;
     jQuery(document).on('click', 'button', function(event) {
         window.link_was_clicked= true;
      });  

     window.onbeforeunload = function() {
         if(window.link_was_clicked==false){                
        //make ajax call      
     }
    };

answered Apr 10 '14 at 12:37

Bellash

7,560
6
53
86

In real code it is `window.link_was_clicked= false;`, I just wanted to keep example short and easy. So this is not the problem. – JohnyFree Apr 10 '14 at 12:39

score 0 · Answer 2 · edited May 23 '17 at 12:13

Since you haven't provided the code for setLocation(), I'll assume that that's where the problem is. Now, regarding a change to the order of execution of your click event handlers:

It is in general bad to have both embedded onclick and jquery-bound handlers, it leads to all sorts of confusion. If you can't change the html, however, you could do what this guy suggests: https://stackoverflow.com/a/7507888/2685386

$(document).ready(function() {
    var myClick = $('button').attr('onclick');
    $('button').removeAttr('onclick');

    $(document).on('click', 'button', function(e) {
        window.link_was_clicked=true;
        // do my other stuff here....
        eval(myClick);// this will now call setLocation()
    });
});

Jquery .on('click,'button' not working

2 Answers2