I have just asked this question an hour ago but with regards to IE8 and I was told that the JQuery Live handlers does not support "change" so I switched over to "click", this solved my problem and now I find Safari does not work with click for some strange reason, anyone know why?

So I was thinking can I just have both?

$('select.htt, select.hst').live('click', function() {
    var channels = parseInt($('#fancy_div select.hst').val(), 10) * parseInt($('#fancy_div select.htt').val(), 10);         
    $('#fancy_div span.yellow2').html(channels + ' Channels');
});

And change(which works on safari)

$('select.htt, select.hst').live('change', function() {
    var channels = parseInt($('#fancy_div select.hst').val(), 10) * parseInt($('#fancy_div select.htt').val(), 10);         
    $('#fancy_div span.yellow2').html(channels + ' Channels');
});

Or is there something more elegant?

EDIT

Maybe I can do a conditional. if ($.browser.msie But how would I do this with the above, the above is also in a $(document).ready(function()

I have just asked this question an hour ago but with regards to IE8 and I was told that the JQuery Live handlers does not support "change" so I switched over to "click", this solved my problem and now I find Safari does not work with click for some strange reason, anyone know why?

So I was thinking can I just have both?

$('select.htt, select.hst').live('click', function() {
    var channels = parseInt($('#fancy_div select.hst').val(), 10) * parseInt($('#fancy_div select.htt').val(), 10);         
    $('#fancy_div span.yellow2').html(channels + ' Channels');
});

And change(which works on safari)

$('select.htt, select.hst').live('change', function() {
    var channels = parseInt($('#fancy_div select.hst').val(), 10) * parseInt($('#fancy_div select.htt').val(), 10);         
    $('#fancy_div span.yellow2').html(channels + ' Channels');
});

Or is there something more elegant?

EDIT

Maybe I can do a conditional. if ($.browser.msie But how would I do this with the above, the above is also in a $(document).ready(function()

• javascript
• jquery

• 1 I haven't had any problems with "click" event bubbling in Safari. – Pointy Commented Oct 26, 2009 at 14:30
• "click" in the live handler? What safari version do you use and on what OS. Mine is on windows and its a version 4. – Abs Commented Oct 26, 2009 at 14:38
• 1 Safari 4 on Windows. Click events bubble just fine. What have you done in attempts to debug the problem? Have you tried setting up your own version of what "live()" does in order to see whether the events are making to your container element(s)? – Pointy Commented Oct 26, 2009 at 14:45

4 Answers 4

Try this:

$('select.htt, select.hst').live($.browser.msie?'click':'change', function() { ....

It seems you are running into a bination of issues here:

1. The change event does not bubble in IE, while the click event does
2. The click event does not fire/buuble on <select>/<option> elements in Safari, while the change event does

I'm not sure of the best way forward for your situation though.

The change event shouldn't bubble in ANY browser.

I would just have your code re-bind the change handler whenever the menu is added to the DOM, or perhaps even add an onchange attribute to the select if it's generated by a server script.

Reading through the buglist (http://bugs.jquery./ticket/5677) adding following CSS to the element is a solution as well :

<style>
  element {
      cursor : pointer;
  }
</style>

Works on iphone4 with safari

Reference