Блог

У меня есть куча элементов на странице с классом «product». Я хочу прикрепить обработчик событий к каждому из них, поэтому при наведении курсора мыши отображается всплывающая подсказка. Следующий код отлично работает в Chrome, Firefox, Safari и IE8 , но не в IE7:

     function init() {
        $$('.product').each(function(elm) {
            var id = elm.id;
            var name = new Element('div', {'class': 'title'}).update(products[id].name);
            var desc = new Element('div').update(products[id].desc);
            var content = new Element('div');
            content.appendChild(name);
            content.appendChild(desc);
            elm.observe('click', function() {showTooltip(content)});
            elm.observe('mouseover', function() {showTooltip(content)});
            elm.observe('mouseout', function() {hideTooltip()});
        });
    }

    document.observe('dom:loaded', init);
  

В IE7 при первом наведении курсора мыши на каждый элемент все работает нормально. Но при втором наведении курсора мыши на элемент переменная «content» пуста. Если я заменю свою showTooltip() функцию простой alert(content.innerHTML) , она в первый раз выдает правильный HTML-код, и каждый раз после этого предупреждение остается пустым.

Я также пытался сохранить содержимое как объект и использовать bindAsEventListener, но я получаю тот же результат.

У кого-нибудь есть какие-либо мысли о том, что заставляет контент не сохраняться в IE7?

Вместо этого я бы попробовал добавить «content» в DOM и передать ссылку на элемент для всплывающей подсказки, а не на элемент в коде.

@Джош Райан, что функция hideTooltip () делает при наведении курсора мыши. Если это происходит, когда функциональность теряется, я бы начал там с моей отладки.

РЕДАКТИРОВАТЬ: Извините, теперь я вспоминаю, что вы сказали, что это работает в других браузерах, но все равно было бы полезно увидеть функцию mouseout.