Оно мне дублирует, почему?

Question

[Alpha12]

Добрый день, мне нужно, что бы при размере меньше 768 добавлялся элемент i
я сделал так.. но оно мне при растягивании или изменении экрана в районе 768px дублирует тег i
как это пофиксить
Код

jQuery(document).ready(function() {
    jQuery(window).resize(function(){
        if (jQuery(window).width() < 768) {
            jQuery('.web-vmenublockheader .t').css('display:block');
            jQuery('.web-vmenublockheader').append("<i class='icon-cheveron-down'></i>");
        }
        else{
            jQuery('.web-vmenublockheader .t').css('display:none');
            jQuery('.icon-cheveron-down').remove();
        }
    }); 
   $('.icon-cheveron-down').click(function () {
    console.log("2");
    $('.web-vmenublockcontent').slideToggle();
   })
})

Comments

[Moses Fender]

Ну потому что событие resize происходит постоянно, и ты иконку вставляешь каждый раз когда оно файрится.
Нужно куда-то в переменную шеврон сохранять, и проверять его. Как-то так:

var chevron;
        jQuery(window).resize(function () {
            if (jQuery(window).width() < 768) {
                jQuery('.web-vmenublockheader .t').css('display:block');
                if (!chevron) {
                    chevron = jQuery('.web-vmenublockheader').append("<i class='icon-cheveron-down'></i>");
                }
            } else {
                jQuery('.web-vmenublockheader .t').css('display:none');
                jQuery('.icon-cheveron-down').remove();
                chevron = undefined;
            }

[Alpha12]

Moses Fender, Да работате, но почему то теперь не работает slidetoggle

jQuery('.web-vmenublockheader i').click(function() {
    jQuery('.web-vmenublockcontent').slideToggle();
 })

[Moses Fender]

Alpha12, Слушатель click назначается конкретному .web-vmenublockheader i
А ты его удаляешь из DOM, соответственно, слушатель уже привязан к отсутствующему элементу. Когда встрамляешь новый шеврон, нужно создавать ему нового слушателя. Или, лучше, делегировать клик документу.

[Alpha12]

Moses Fender, Как это понять, прописать в функции resize?

[Виталий Киренков]

Я задам наверное глупый и странный вопрос... Но зачем вы делаете это на js? Вы о media queries слышали?

[Moses Fender]

Alpha12, Можно так, назначая слушателя каждый раз:

if (jQuery(window).width() < 768) {
                jQuery('.web-vmenublockheader .t').css('display:block');
                if (!chevron) {
                    chevron = jQuery('.web-vmenublockheader')
                            .append("<i class='icon-cheveron-down'></i>");
                    chevron.click(function () {
                        console.log("2");
                        $('.web-vmenublockcontent').slideToggle();
                    });
                } …

А можно просто где-то в начале, не в обработчике resize, делегировать документу слушать. Тогда будет один слушатель на все шевроны, вне зависимости, когда он создаётся или уничтожается:

jQuery(document).on('click', '.icon-cheveron-down', function () {
            $('.web-vmenublockcontent').slideToggle();
        });

[Alpha12]

Виталий Киренков, Слышал, там очень старый шаблон джумла, нету возможности по другому поступить

[Alpha12]

Moses Fender, Спасибо Вам большое!