CODEWITHSUNDEEP
jqueryonclick
LeeTee
LeeTee

Reputation: 6601

JQuery - on() click doesn't work 2nd time round

I have tried multiple ways to get this working, but no matter what I change, it just doesn't work. It works perfectly on the first link that is selected. Any subsequent links that are selected it doesn't work and I get no errors due to it loading to a new page.

        // get discounts for store 
        $('.store_link a').on('click', function(e) { 
            alert('yeah');
            var $this = $(this);
            var cat = $this.attr('data-cat');
            var $optionSet = $('.categories > .option-set');
            var storeDiscountURL = $this.attr('href');
            var storeID = '.' + $this.attr('id');
            //select relevant filter colour
            $optionSet.find('.selected').removeClass('selected');
            $('#nav li.' + cat + ' a').addClass('selected');
            selector = '.second_page,' + storeID;
            loadMoreItems(storeDiscountURL, 'secondpage', selector);

            //remove infinate scroll 
            $container.infinitescroll('destroy');

            return false;

        });

 echo "<div id=\"toggle-$id\" class=\"contenthover hide\">";

                                      echo "<p class=\"store_link\"><a id =\"skid_$discount[skID]\" data-cat=\"$category\" href=\"index.php?curr=$_SESSION[curr]&skid=$discount[skID]\">View all discounts for this store</a></p> ";


                                </div>";

Upvotes: 0

Views: 850

Answers (1)

Reza Mamun
Reza Mamun

Reputation: 6189

I guess, the clicking link TAG is adding or getting updated by other JS or jQuery plugins in any way. So, the selector is not working for the subsequent 'A' tags. You should try:

$('body').on('click', '.store_link a', function(e) { 
    ....
    ....
});

The selector 'body' should be any closest selector which is always present while it's first DOM load time.

Upvotes: 1

Related Questions