jQuery .on (), .live () и .click () работают только один раз

0

Я пробовал все три, и каждый из них работает только один раз, и я должен обновиться, чтобы заставить его работать снова. Вот мой код.

$(document).ready(function(){
    $('#notificationTB').on('click', function(){
        document.getElementById('notificationTB').src='img/notifC.png';
        $('#notifBox').css('display', 'block');

        $(this).on('click', function(){
            document.getElementById('notificationTB').src='img/notif.png';
            $('#notifBox').css('display', 'none');
        });
    });
});

благодаря

Теги:

4 ответа

0
Лучший ответ

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

$(document).ready(function(){
    $('#notificationTB').on('click', function(){
        var self = $(this); //refers to this element - $('#notificationTB')

        if(self.attr("src") == "img/notif.png"){
            self.attr("src", "img/notifC.png");
            $('#notifBox').css('display', 'block'); //.show() or .hide() will also do this
        } else {
            self.attr("src", "img/notif.png");
            $('#notifBox').css('display', 'none');
        }
    });
});
Поделиться
  • 0
    это работает отлично, поэтому вместо того, чтобы полагаться на события, которые будут происходить для другого события, использовать условные выражения в будущем, если я правильно понимаю?
  • 0
    При переключении одного и того же элемента через одно и то же событие, да.
Показать ещё 1 комментарий
3

Просто используйте .toggle() для переключения между display: block и display: none:

$(document).ready(function(){
    $('#notificationTB').on('click', function(){
        $('#notificationTB').attr('src',function(i,str) {
            return (str=='img/notifC.png') ? 'img/notif.png' : 'img/notifC.png';
        });
        $('#notifBox').toggle();
    });
});

или еще лучше:

$(document).on('click', '#notificationTB', function(){
        $(this).attr('src',function(i,str) {
            return (str=='img/notifC.png') ? 'img/notif.png' : 'img/notifC.png';
        });
        $('#notifBox').toggle();
    });
});

http://api.jquery.com/attr/#attr-attributeName-functionindex--attr

Поделиться
  • 0
    Я также должен изменить img src с img / notif на img / notifC.
  • 0
    видел, что поздно - исправлено сейчас.
Показать ещё 3 комментария
0

Попробуй это

$(document).ready(function(){
    $(document).on('click', '#notificationTB', function(){
        document.getElementById('notificationTB').src='img/notifC.png';
        $('#notifBox').css('display', 'block');

        $(this).on('click', function(){
            document.getElementById('notificationTB').src='img/notif.png';
            $('#notifBox').css('display', 'none');
        });
    });
});

альтернативно, вы, скорее всего,

$(document).on('click', '#notificationTB', function(){
    $('#notificationTB').attr('src','img/notifC.png');
    $('#notifBox').css('display', 'block');
    $(this).on('click', function(){
        $('#notificationTB').attr('src','img/notif.png');
        $('#notifBox').css('display', 'none');
    });
});
Поделиться
0

Почему вы используете getElementById, когда у вас есть jQuery?

$(document).ready(function(){
    $('#notificationTB').on('click', function(){
        var $box = $('#notifBox'), $this = $(this);
        $box.toggle();      
        if($box.is(":visible")){
            $this.attr('src','img/notifC.png');
        }else{
            $this.attr('src','img/notif.png');
        }       
    });
});
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню