2

I can't get the jquery selector in my javascript below to work in Safari (5.0.4):

$("#js-nav-bar option").click(function() {
    document.location.href = $(this).val() ;
}) ;

Just using "#js-nav-bar" as a selector works in Safari, but I need to target the <option> element in my HTML.

The selector $("option") doesn't work in Safari either, but I do know that the jquery script is working. My code works in FF (3.6.16) and Opera (9.27), and I've validated my HTML against the W3 validator and my javascript against JSlint.

Is there a way I could better write my jquery selector, or could I build a compound javascript selector to work around the Safari bug?

Brandon Lebedev
  • 2,717
  • 6
  • 24
  • 35
  • 2
    what does the html look like? – Naftali Jun 23 '11 at 17:48
  • possible duplicate of [JQuery Click event not being triggered in Safari?](http://stackoverflow.com/questions/472259/jquery-click-event-not-being-triggered-in-safari) – helloandre Jun 23 '11 at 17:52
  • @contagious - I looked at the link you posted, but in a previous version of my code, .click happily targeted my – Brandon Lebedev Jun 23 '11 at 17:58
  • @Aliean -- see update to my answer – Naftali Jun 23 '11 at 18:02
  • 1
    @Alien There is a right solution on Neal's answer. There can't be anything wrong with selectors. – Karolis Jun 23 '11 at 18:06

3 Answers3

4

It may have to do with the binding you're going for. Instead of binding the click event to the <option> itself, bind to the <select>'s change event instead.

$('#js-nav-bar select').change(function(e){
  var tgt = $(this).val(); // .val() should find the selected option's value for you.
  document.location.href = tgt;
});

See if that works any better.

Brandon Lebedev
  • 2,717
  • 6
  • 24
  • 35
Brad Christie
  • 100,477
  • 16
  • 156
  • 200
  • `.click` vs. `.change` isn't the issue. The issue is the jquery selector `"#js-nav-bar option"`. In an earlier version of my page `.click` worked in Safari. – Brandon Lebedev Jun 23 '11 at 17:55
  • 1
    @Brad in the OP's code `#js-nav-bar` is a `div` (not a `select`). – Naftali Jun 23 '11 at 17:56
  • @AlienRobert: So you're saying `$('#js-nav-bar option').css('color','#F0F');` has no effect on the items? I think you're concluding it's not working because the ` – Brad Christie Jun 23 '11 at 17:57
  • @Brad: I used `alert ("Hello?") ;` to debug with instead. (If you look in my code that I posted online, you'll see it in there.) Is that about the same thing you're asking? – Brandon Lebedev Jun 23 '11 at 18:04
  • @Brad - I copied your code into my script as you posted it, but I couldn't get it to work in FF or Safari. If you want to look at the page with the change, you can see it [here](http://web.utk.edu/~bruyten/stack-test/test2.html). – Brandon Lebedev Jun 23 '11 at 18:08
  • @Alien he made a typo. He forgot to add `select` to the selector. – Karolis Jun 23 '11 at 18:11
  • @Brad - with Karolis' fix to add `select` into your code, your solution works in Safari. Many of you have told me to use `.change` instead of '.click` -- but that leaves me with a new issue. If you look at my page in the top right hand corner, "Table of Contents" is the first – Brandon Lebedev Jun 23 '11 at 18:20
  • @Brad - also, why are you using the "e" argument variable in `change(function(e){`? – Brandon Lebedev Jun 23 '11 at 18:21
  • @Alien: I use e just because some browsers pass an event argument (IE) and some don't. Used to supplying it with older binding methods. -- And you want to, despite it being the pre-selected option, to be able to select the table of contents? I would add a "non-selectable" option then as the default, and force them to select the ToC. – Brad Christie Jun 23 '11 at 18:28
2

In your code you have #js-nav-bar as a div:

Try this:

$('#js-nav-bar select').change(function(e){ //<-- on change of the select
  document.location.href = $(this).val() ;
});

Also i noticed in your code that all you selects have the same class (lim-width), so use it!

$('.lim-width').change(function(){
   document.location.href = $(this).val();
})
Naftali
  • 144,921
  • 39
  • 244
  • 303
  • Using `"#js-nav-bar .lim-width"` as my selector worked! That provides a work-a-round for the Safari bug, but it still doesn't address why using `"option"` as a jquery selector doesn't work in Safari. – Brandon Lebedev Jun 23 '11 at 18:15
  • @Alien I am not sure. it is always best to put the handler on the select box in general. (the issue was also in Chrome as I did not see the alert) – Naftali Jun 23 '11 at 18:17
0

you should use the change event not the click event

$('.target').change(function() {
  alert('Handler for .change() called.');
});
Traveling_Monk
  • 778
  • 2
  • 11
  • 28