Event isn't firing on click

Question

I have appended the following HTML to a Div called videoList but when I click the link it isn't firing the ajax call but it's going to the url defined in href. I have tried javascript void in href but still it's not firing the ajax on click. No error is present in console!

 var newHtml = '<div class="group-seemore">';
                        newHtml +=    '<a class="ajax-cate-mobile" data-slug="' + res.category.slug + '" data-start="5" href="/blog/category/'+ res.category.slug +'" title="">';
                        newHtml +=    'See more';
                        newHtml +=    '</a>';
                        newHtml +=    '</div>';
                        $('#videoList').append(newHtml);

Ajax:

$('.ajax-cate-mobile').click(function(e){
            console.log('hi');
            e.preventDefault();
            var $this = $(this);
            var start = $this.parents('.blog-groups').find('.ajax-cate-mobile').data('start');
            params.start = start;
            var newStart = start + 10;
            $this.parents('.blog-groups').find('.ajax-cate-mobile').data('start', newStart);

            $(this).style="border-bottom:1px solid #197B81";
            var _loader = '<div class="ajax-loader"><img src="/images/ajax-loader.gif"></div>';
            //$('#videoList').empty().html(_loader);
            var cate_slug = $(this).attr('data-slug');
            params.cate_slug = cate_slug;
            ajaxLoadVideoInMobile(params, $this);
            $('.submenu').fadeOut();
            $('.ajax-loader').fadeOut();
        });

timing is irrelevant if you bind the event using `on` @HerrSerker — Liam, Jan 08 '19 at 10:48
http://api.jquery.com/on/#direct-and-delegated-events - read the bit about delegated event handlers — Pete, Jan 08 '19 at 10:49
@Liam That's true, but it wasn't clear that this was the issue here. — yunzen, Jan 08 '19 at 11:00

score 0 · Accepted Answer · answered Jan 08 '19 at 10:50

0

Bind the event with the help of a parent which already exists:

$(document).on("click", ".ajax-cate-mobile", function() {
    // Your code 
});

answered Jan 08 '19 at 10:50

Nitha

672
5
10

Thanks it worked – DojoDev Jan 08 '19 at 10:53

Event isn't firing on click

1 Answers1