JS работает в FF, но не в IE - PullRequest
Новая
       1

JS работает в FF, но не в IE

0 голосов
/ 03 ноября 2011

Я новичок в JS. Я сделал 2 простых функции для изменения значения и события onclick для кнопки ввода. 

function doAjaxRequest(url, divID, buttonID) {
  $(divID).html('<img src="images/loader.gif" />');
  setTimeout(function(){ $(divID).load(url); }, 600);
  setTimeout(function(){ $(buttonID).attr({
      value: 'Schliessen',
      onClick: 'clear_div(\''+url+'\', '+divID.id+', '+buttonID.id+')'
    });}, 600);
};

function clear_div(url, divID, buttonID) {
    $(divID).empty();
    $(buttonID).attr({
      value: 'Mehr...',
      onClick: 'doAjaxRequest(\''+url+'\', '+divID.id+', '+buttonID.id+')'
    });
};

вызов функции 

<div id="div1"></div>
<input type="button" id="button1" onClick="doAjaxRequest('test.html', div1, button1);" value="More..."/>

doctype, который я использую для моей домашней страницы, 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

обе функции работают корректно в IE, но в FF они работают, только если я установил для doctype значение 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

Я также попробовал "oose.dtd "без эффекта.

Что я делаю не так с JS? Надеюсь, кто-нибудь может мне помочь.

Greets Джо

Ответы [ 2 ]

6 голосов
/ 03 ноября 2011

Проблема, вероятно, в том, что onClick должно быть onclick (регистр значим в атрибутах в XHTML). Но есть пара проблем.

  1. В вашей разметке здесь: 

    <input type="button" id="button1" onClick="doAjaxRequest('test.html', div1, button1);" value="More..."/>

    Вы не ставили кавычки вокруг div1 или button1, что означает, что вы полагаетесь на то, что браузер выводит эти символы в глобальное пространство имен, потому что они являются идентификаторами ваших элементов. Это довольно часто (IE и некоторые другие делают это), но это не универсально. Вместо этого я бы пропустил строки и затем правильно их просмотрел.

  2. Поскольку вы используете jQuery, нет никаких причин (и есть несколько причин не использовать) атрибуты onclick.

    Итак: 

    function doAjaxRequest(url, divID, buttonID) {
  $('#' + divID).html('<img src="images/loader.gif" />');
  setTimeout(function(){
    $('#' + divID).load(url);
  }, 600);
  setTimeout(function(){
    $('#' + buttonID)
      .attr({value: 'Schliessen'})
      .click(function() {
        clear_div(url, divID, buttonID);
    });
  }, 600);
}

function clear_div(url, divID, buttonID) {
    $('#' + divID).empty();
    $('#' + buttonID)
      .attr({value: 'Mehr...'})
      .unbind('click')
      .click(function() {
        doAjaxRequest(url, divID, buttonID);
      });
}

    И аналогично, ваше подключение кнопок изначально должно быть: 

    $("#button1").click(function() {
  doAjaxRequest('test.html', 'div1', 'button1');
});

    ... вместо использования onclick в HTML. Этот код должен отображаться после кнопки в HTML (довольно часто рекомендуют помещать теги script в внизу документа, непосредственно перед закрывающим тегом </body>) или вы можете обернуть его в обработчик jQuery ready: 

    jQuery(function($) {
    $("#button1").click(function() {
      doAjaxRequest('test.html', 'div1', 'button1');
    });
});

    ... поэтому он работает только после загрузки DOM.

Примечания:

  • Теперь мы используем реальные функции для обработчиков событий и подключаем их современным способом.
  • Мы используем идентификаторы элементов, а не их глобальные экземпляры (которые не совсем надежны).
  • Мы используем unbind для удаления всех предыдущих обработчиков click перед добавлением нашего нового.
  • Нет необходимости ставить точку с запятой после объявления функции. Точки с запятой завершают утверждения. Объявления функций не являются заявлениями (это объявления). Тем не менее, поставить точку с запятой там безвредно : -)

И, наконец: вместо того, чтобы удалять старый обработчик click и вставлять новый, я думаю, что я, вероятно, просто заставлю обработчик щелчка изменить свое поведение, основываясь на каком-то флаге.

0 голосов
/ 03 ноября 2011

Я не уверен, является ли это причиной вашей проблемы, но ваши параметры doAjaxRequest выглядят для меня забавно следующим образом: я не уверен, что все браузеры представляют элемент как глобальную переменную, названную в честь id элемента. Я был бы более уверен, что ваш код был верным, если бы вы сделали это так: 

onClick="doAjaxRequest('test.html', '#div1', '#button1');"
...