Why does my JQuery work in Firefox/Opera, but not Chrome/Safari/IE?

I have some JQuery code that accesses an iframe on my page and changes the content dynamically based on a users selection from a list. This works fine in some browsers, but not others. Here's th开发者_Go百科e code:

$(document).ready(function(){
  $("#SequentialArt").click(function(){
    $("#comicspace").animate({height:400},"slow");
    $("#comicspace").html("<iframe id='SAFrame' src='http://www.collectedcurios.com/sequentialart.php' height='400' width='900'></iframe>");
  });
  $("#XKCD").click(function(){
  $("#comicspace").animate({height:600},"slow");
    $("#comicspace").html("<iframe src='http://www.xkcd.com' width='900' height='600'></iframe>");
  });
  $("#Happiness").click(function(){
    $("#comicspace").animate({height:600},"slow");
    $("#comicspace").html("<iframe src='http://www.explosm.net/comics/' width='900' height='600'></iframe>");
  });
  $("#Alien").click(function(){
    $("#comicspace").animate({height:600},"slow");
    $("#comicspace").html("<iframe src='http://alienlovespredator.com/' width='900' height='600'></iframe>");
  });  
});


<div id="comic_container">
            <select id='comicselector'>
                <option id='SequentialArt'>Sequential Art</option>
                <option id='XKCD'>XKCD</option>
                <option id='Happiness'>Cyanide & Happiness</option>
                <option id='Alien'>Alien Loves Predator</option>
            </select>
            <p id='comicspace'>
                <img src=<?php bloginfo('stylesheet_directory'); ?>/images/comic_pointer.png />
            </p>
        </div>

This code is in a scripts file along with other code - and this other code works fine in all browsers, so they're managing to link to the .js file. Any ideas? (To repeat, it is specifically Chrome, IE, and Safari that this doesn't work in.)

Some browsers do not support the click method of a <option> within the <select> Check out this fiddle here http://jsfiddle.net/v7aMT/

If you comment out the change code, you will see that nothing happens when you click the alien option when browsing in chrome.

I would update the code to use the change method, and then use $(this).val() to get the selected option, then load in the iframe src from that.

Try binding to the change event of the <select> element. You can also avoid repeating similar code by factoring the pieces that change into their own object. Something like this:

$('#comicselector').change( function(e){
  var content = {
    XKCD : "<iframe src='http://www.xkcd.com' width='900' height='600'></iframe>",
    Happiness : "<iframe src='http://www.explosm.net/comics/' width='900' height='600'></iframe>",
    SequentialArt : "<iframe id='SAFrame' src='http://www.collectedcurios.com/sequentialart.php' height='400' width='900'></iframe>",
    Alien : "<iframe src='http://alienlovespredator.com/' width='900' height='600'></iframe>"
  }
  var which = $(this).find(':selected').attr('id'); // Get id of selected option
  var iframe = content[which];
  var iframeHeight = $(iframe).attr('height');
  $("#comicspace")
    .animate({height: iframeHeight },"slow")
    .html( iframe ); // Get appropriate value from content object

});

Edit: I just realized you're using the ID of each option element. Changed the code accordingly -- although why not just use the value in your HTML?

Update: Following up on your comment, I'm now extracting the value of the height attribute from each iframe string. It looks like you're just echoing that value to change the height of #comicspace, so there's no reason to store it somewhere twice.