CODEWITHSUNDEEP
javascriptjquery
George
George

Reputation: 2493

jQuery .on(), .live(), and .click() all only work one time through

I've tried all three and each of them only works one time through, and I have to refresh to get it to work again. Heres my code.

$(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');
        });
    });
});

Thanks

Upvotes: 0

Views: 1011

Answers (4)

bmasterson
bmasterson

Reputation: 269

Why are you using getElementById when you have 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');
        }       
    });
});

Upvotes: 0

William Worley
William Worley

Reputation: 844

Try this

$(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');
        });
    });
});

alternatively you could likely use this instead

$(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');
    });
});

Upvotes: 0

mattsven
mattsven

Reputation: 23293

It looks like you're trying to toggle between two states. How you're doing it isn't very good, since it's usually poor form to define an element's click handler in it's own click handler, especially since in this case the old one isn't removed. Try this:

$(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');
        }
    });
});

Upvotes: 0

Blazemonger
Blazemonger

Reputation: 92953

Just use .toggle() to switch between display: block and 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();
    });
});

or better yet:

$(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

Upvotes: 3

Related Questions