Код не работает в Google Chrome, но отлично работает с Mozilla

Question

Я работаю над этой скрипкой с печеньем. Вот ссылка. но он отлично работает с Mozilla в первый раз. когда я удаляю все файлы cookie, но когда я снова открываю страницу, она сразу переходит ко второму блоку, который должен отображаться после нажатия кнопки в первом блоке. а также второй div должен быть показан и первый div должен быть скрыт при обновлении. и даже это не работает для хрома в любом случае. Любая идея или предложения по улучшению. заранее спасибо. вот мой код:

       $('#sbut1').click(function() { 
       $('.cont1').show();
     $('#log1').hide();
        $.cookie('shown', true);

        });

     $(function() {
      if ($.cookie('shown')) {
         $('#sbut1').click()
       }
        });

Answer 1

Обновить:

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

$(function()
{
    (function(sbut1)
    {
        (function(log1, cont1)
        {
            sbut1.on('click',function()
            {
                cont1.show();
                log1.hide();
                $.cookie('shown', true);
                $(this).off('click');
            });
        }($('#log1'), $('.cont1')));
        if ($.cookie('shown'))
        {
            sbut1.trigger('click');
        }
    }($('#sbut1')));
});

Есть пара вещей, которые могут показаться неуместными (например, связывание и открепление слушателей событий), но комментарии в скрипте объясняют, почему я это делаю. Основная причина - очистить все ссылки на DOM, чтобы они были помечены для сбора мусора.
Опять же, этот код прекрасно работает как в FF, так и в Chrome.

В ответ на мой последний комментарий, тоже самое, только vanillaJS:

window.addEventListener('load', function l()
{
    var cookie = (function(trueUndef)
    {
        var clean = (localStorage || document.cookie);
        return function(name, val)
        {
            if (val === trueUndef)
            {
                if (clean === localStorage)
                {
                    return clean.getItem(name);
                }
                val = clean.split(name + '=')[1];
                return val ? val.match(/^[^;]+/)[0] : trueUndef;
            }
            if (clean === localStorage)
            {
                return clean.setItem(name, val);
            }
            return !!(clean = name + '=' + val);
        };
    }()),
    sbut1 = document.getElementById('sbut1');
    sbut1.addEventListener('click', (function clickHandler(log1, cont1)
    {
        return function(i)
        {
            log1.style.display = 'none';
            for(i=0;i<cont1.length;i++)
            {
                cont1[i].style.display = 'block';
            }
            cookie('foo', true);
            sbut1.removeEventListener('click', clickHandler, false);
        };
    }(document.getElementById('log1'), document.getElementsByClassName('cont1'))), false);
    if (cookie('foo') === 'true')
    {
        sbut1.dispatchEvent(new Event('click'));
    }
    window.removeEventListener('load',l, false);
}, false);

---

Я посмотрел на вашу скрипку и изменил код так:

$(function()
{
    $('#sbut1').click(function()
    { 
        $('.cont1').show();
        $('#log1').hide();
        $.cookie('shown', true);
    });
    if ($.cookie('shown'))
    {
        $('#sbut1').click()
    }
});

Который работает как шарм, для меня (с опцией без переноса - в голове), как вы можете видеть здесь

Просто замечание: вы используете много селекторов DOM, которые вызывают функции повсеместно и слишком часто запрашивают DOM. Ваш код мог бы быть намного эффективнее, если бы вы указали ссылку на эти узлы DOM:

$(function()
{
    (function(sbut1, log1, cont1)
    {
        sbut1 = sbut1 || $('#sbut1');//safety-net
        log1 = log1 || $('#log1');
        cont1 = cont1 || $('.cont1');
        sbut1.click(function()
        {
            cont1.show();
            log1.hide();
            $.cookie('shown', true);
        });
        if ($.cookie('shown'))
        {
            sbut1.click();
        }
    }($('#sbut1'), $('#log1'), $('.cont1')));
});

Конечно, IIFE является необязательным, но он оборачивает ссылки DOM в область видимости, поэтому они доступны только для тех частей вашего скрипта, которые действительно в них нуждаются.
Есть много способов улучшить этот код, но лишних DOM-запросов легко избежать, поэтому я подумал, что я бы порекомендовал вам позаботиться об этом.