Почему мой JQuery работает в Firefox / Opera, а не в Chrome / Safari / IE?

Question

У меня есть некоторый код JQuery, который обращается к iframe на моей странице и динамически изменяет содержимое на основе выбора пользователей из списка. Это отлично работает в некоторых браузерах, но не в других. Вот код:

$(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>

Этот код находится в файле сценариев вместе с другим кодом - и этот другой код прекрасно работает во всех браузерах, поэтому им удается связать файл .js. Есть идеи? (Повторюсь, это не Chrome, IE и Safari, в которых это не работает.)

Answer 1

Некоторые браузеры не поддерживают click метод <option> в <select> Проверьте эту скрипку здесь http://jsfiddle.net/v7aMT/

Если вы закомментируете код change, вы увидите, что ничего не произойдет, если вы щелкнете по опции инопланетянина при просмотре в chrome.

Я бы обновил код для использования метода change, а затем использовал $(this).val(), чтобы получить выбранную опцию, а затем загрузить из него iframe src.

Answer 2

Попробуйте связать с событием change элемента <select>. Вы также можете избежать повторения подобного кода, разложив фрагменты, которые превращаются в их собственный объект. Примерно так:

$('#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

});

Редактировать: Я только что понял, что вы используете ID каждого элемента опции. Соответственно изменил код - хотя почему бы просто не использовать значение в вашем HTML?

---

Обновление: После вашего комментария я извлекаю значение атрибута height из каждой строки iframe. Похоже, вы просто выводите это значение, чтобы изменить высоту #comicspace, поэтому нет смысла хранить его где-то дважды.