jquery click event fires for the first time but fails second time.It works when page refreshes

Question

Im opening a div on click of another div.Below code seems to be working only for the first time.
It works when page refreshes. Close event always get called but click event does not fire.

$('.redirection-list .redirection a').on('click', clickevent);


function clickevent() {
    $(this).attr("href", "#myCurrentDiv");
    $('.redirection-list li').removeAttr('id');
    $(this).closest('li').attr("id", "myCurrentDiv");
    $('.redirection-list .redirection').removeClass('active');
    $(this).closest('li').addClass('active');
    $('.block-list').removeClass('col-sm-12');
    $('.block-list').addClass('col-sm-6');
    $('.redirection-edit').addClass('open');

    $('.redirection-status span:nth-of-type(2n)').hide();
    $('.redirection-status span:nth-of-type(n)').css('border-radius', '50px');

    if ($(window).width() <= 768) {
        $('body').addClass('mobile-device');
    }
    else {
        $('body').removeClass('mobile-device');
    }

    $('.redirection-edit').insertAfter(this);
    $('.redirection-edit').fadeIn(700);
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        if (target.length) {
            if ($(target).closest('.block-list').hasClass('search-list')) {
                $('html, body').animate({
                    scrollTop: target.offset().top - 185
                }, 500);
                return false;
            }
            else {
                $('html, body').animate({
                    scrollTop: target.offset().top - 112
                }, 500);
                return false;
            }
        }
    }
}


$('.redirection-edit .close').click(function () {
    $('.redirection-edit').removeClass('open');
    $('.redirection-edit').fadeOut(500);
    $('.redirection-list .redirection').removeClass('active');
    $('.block-list').removeClass('col-sm-6');
    $('.block-list').addClass('col-sm-12');

    $('.redirection-status span:nth-of-type(2n)').show();
    $('.redirection-status span:nth-of-type(n)').css('border-radius', '50px 0px 0px 50px');
    $('.redirection-status span:nth-of-type(2n)').css('border-radius', '0px 50px 50px 0px');
    $('.redirection-list .redirection a').bind('click',clickevent)
});

score 0 · Answer 1 · answered Mar 08 '18 at 09:37

0

First of all too much codes and lack of HTML code makes the question confusing. anyway, as far as I understand the event handler is not getting bind to the anchor once done already, which may occur if the anchor is being manipulated or created dynamically if that is the case changing the code as below will do the trick

$('body').on('click', '.redirection-list .redirection a', clickevent);

answered Mar 08 '18 at 09:37

fayis003

680
4
10

$('body').on('click', '.redirection-list .redirection a', clickevent); Does not trigger click event instead i used $('document').on('click', '.redirection-list .redirection a', clickevent); this triggered click event but only once; second time it does't. And yes it is dynamic population n im using angularjs – user9326447 Mar 08 '18 at 11:04
$('document').on('click', '.redirection-list .redirection a', clickevent) will surely work for dynamically created elements try console log $('.redirection-list .redirection a') matches any elements in the DOM – fayis003 Mar 08 '18 at 11:08

jquery click event fires for the first time but fails second time.It works when page refreshes

1 Answers1