Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Opera ignoring .live() event handler

I have the following jQuery which works in all major browsers except Opera:

jQuery(document).ready(function () {

      jQuery("#GetResults").live("click", function(e){
            e.preventDefault(); //Opera doesn't execute anything here
      });

};

Which is supposed to fire when clicking the following link:

<a id="GetResults" href="Folder/File/javascript:void(0);">Get Results</a>

Only Opera ignores this. Any ideas?

Edit:

I've just discovered that if I substitute out .live() for .bind() everything functions as expected. I can't find any documentation relating to .live() bugs in Opera though, and it does work in jsFiddle which would point at something environmental. What could be causing this behavour?

like image 665
m.edmondson Avatar asked Jul 05 '11 15:07

m.edmondson


3 Answers

This needs clarification. The answers above are correct, but nobody clearly explained where your problem comes from.

In fact I think that you could probably reproduce the problem in other browsers too. That's because of how .live works:

It binds to the event on document and waits for a particular event to bubble up to there. Then it checks if the event.target is what you wanted to handle. *

If you click on a link element it's quite possible that the browser goes to the new page before the event bubbles high enough to trigger your code. In an app with lots of HTML and event handlers all the browsers should have problems. Opera just starts displaying the new page and destroys the previous quicker in this case. It really depends on a particular situation more than on the browser. For example: you probably won't see this happen if you had a high network latency while connecting to the site.

To prevent default action on a a element you have to use .bind like in the old days ;) when a eveloper had to be aware of what he loads with AJAX and bind new events to that in a callback.

* There is more to that and .live is more complicated. I just described what is needed here.

like image 126
naugtur Avatar answered Oct 19 '22 09:10

naugtur


What happens when you attach the handler using:

$ (something).bind ("click", function (e) {
    // do something
})

You can also try to attach the handler using .click() method.

like image 25
Дамян Станчев Avatar answered Oct 19 '22 10:10

Дамян Станчев


The following code works as expected in Opera 11.50.

<!doctype html>
<title></title>
<a id="GetResults" href="http://google.com">Get Results</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
jQuery(document).ready(function () {
  jQuery("#GetResults").live("click", function(e){
    alert('doing something');
    e.preventDefault(); //Opera doesn't execute anything here
  });
});
</script>

Either it is a corrected bug, or something more subtle.

Can you check whether the above works on your version of Opera / jQuery?

like image 4
Thaddee Tyl Avatar answered Oct 19 '22 11:10

Thaddee Tyl