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

ProgramBox

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

Post author:admin
Запись опубликована:19 февраля, 2023
Post category:Вопросы по программированию

#javascript #jquery #doctype

Вопрос:

я новичок в 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 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">

я также попробовал «loose.dtd» без эффекта.

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

Приветствует Джо

1. Вы пробовали перейти onClick на onclick

2. Заголовок: «JS работает в FF, но не в IE» Тело: *»… обе функции корректно работают в IE, но в FF они работают только в том случае, если …» Что правильно?

3. В Q.название: работает в FF, но не в IE , в Q.текст корректно работает в IE, но в FF … ?

4. Скажите нам, какую версию Internet Explorer вы используете. Большинство из них устарели и не соответствуют многим стандартам, поэтому это может быть что-то важное.

Ответ №1:

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

В вашей разметке здесь:
```
 <input type="button" id="button1" onClick="doAjaxRequest('test.html', div1, button1);" value="More..."/>
  
```
Вы не заключили в кавычки div1 или button1 , что означает, что вы полагаетесь на то, что браузер помещает эти символы в глобальное пространство имен, потому что они являются идентификаторами ваших элементов. Это довольно распространенное явление (IE и некоторые другие делают это), но оно не универсально. Вместо этого я бы передавал строки, а затем просматривал их должным образом.
Поскольку вы используете 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 обработчик и вводить новый, я думаю, я бы, вероятно, просто заставил обработчик щелчков изменить свое поведение на основе некоторого флага.

1. 1 Хороший ответ, хотя я не уверен, устраняет ли он проблему, с которой столкнулся OP.

2. @Tadeck: Спасибо. Разница между XHTML и HTML в FF должна быть вызвана vs. onClick onclick Я упомянул вверху (в XHTML все должно быть в нижнем регистре; в HTML это может быть все, что вам нравится, даже OncLiCk ). Большая часть остального — это просто лучшие практики. 🙂

3. Хорошо, теперь мне все ясно 🙂 Случаи Doctype attributes были основной проблемой здесь. Спасибо.

4. спасибо за ваш хорошо объясненный ответ. Я попробую это и дам отзыв.

Ответ №2:

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

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

1. Я думал о том же. Лучше отправлять идентификаторы, а не ссылаться на объект.

2. Все еще возникают проблемы с вызовом clear_div , и это само по себе не поможет с проблемой onClick / onclick , А использование динамически генерируемых onclick строк — просто плохая идея (особенно, когда на странице уже используется jQuery, поэтому сделать это правильно тривиально просто).