Question

My code

var post = {};
post.DivPostContent = $('.content');
post.DivPostContent.live({
    mouseenter:
        function()
        {
            var post_id = $(this).attr('data-post_id');
            var content_id = $('#content' + '_' + post_id);
            var link = $('#link' + '_' + post_id);
            content_id.find('.post_ratings').hide();
            content_id.find('.post_actions').show();
            //I removed the click event on a whim, i have no clue why it works
            link.unbind('click');
            link.click(function(){
                post.link_action(post_id);

            });


        },
    mouseleave:
        function()
        {
            //does something


        }
});

post.link_action = function(){
//Does some Ajax request
}

Before i unbinded the click event from “Link” it called “post.link_action” four times, i was trying to get my head around why it does that. After hours of reading through my code again and again, i thought to myself, let’s try removing the click event and i mistakenly put that line in the wrong place(out of frustration i guess). I ran the code, and viola! it worked! How? I have no clue.

Now my question is, why does unbinding the click event before adding it stop the process from repeating itself? I really would like to know why.
Thanks.

Answer 1

because every time your mouse enter the object post.DivPostContent it’s binding a new click event to your link object; it triggered 4 times because you moused over 4 times.

forget .live & .click; use .on instead and bind one time & outside your mouseenter event or if you insist to bind it in there use a .off before

 $elem.off("click").on("click",function() {});

but do it once and outside your mousenter