jQuery function not triggering on first click

Question

I am having a small problem where my click function is triggering on the first click. The function does work on the second click though. Below is an example of my code.

function returnReviews() {
$(".bv-read-review ").click(function() {
$('html, body').animate({
    scrollTop: $(".bv-action-bar-header").offset().top
}, 700);
});
}; 

The second part of my code where the function is called is here, below is an example of the relevant part.

$(document).ready(function() {
var bvrrDiv = $('#bvReview');
var productId = bvrrDiv.attr("data-productid");
    bvrrDiv.append("<a class='bv-read-review' data-productid='" + productId      + "' href='javascript:returnReviews();'\">Read reviews</a>");

What i am trying to achieve is on the first click of a link for the screen to scroll down to a particular div.

The first function sits at the top of the JS file whilst the second sits at the bottom.

I'm relatively new at jQuery so any help would be greatly appreciated.

Kind Regards,

Answer 1

You're calling the function when the element is clicked:

href='javascript:returnReviews();'

But what does that function do ?:

function returnReviews() {
    $(".bv-read-review ").click(function() {
        //...
    });
}

It just adds a click handler. Nothing else. The next time you click the element, that click handler will be invoked. (And another one will be added, over and over, until you have many click handlers all trying to do the same thing at the same time.)

Instead of wrapping it in a function and calling that function in-line, just add the click handler to the page:

$(document).on('click', '.bv-read-review', function() {
    $('html, body').animate({
        scrollTop: $(".bv-action-bar-header").offset().top
    }, 700);
});

And then you don't have to add it in-line in the markup:

bvrrDiv.append("<a class='bv-read-review' data-productid='" + productId + "' href='#'\">Read reviews</a>");

---

Note that a non-link href is somewhat bad practice. Since this isn't actually an "anchor" per se, then a isn't really the correct tag to use. A button styled to look like an anchor, perhaps? A span which styles the cursor when hovering? There are lots of options. What you have will technically work , but may cause confusion for accessibility (screen readers, other non-visual browsers, etc.) if that's a concern.

Answer 2

The element should be added to the DOM with the click handler bound to it. The way you have it written currently, you have a function called on click, which then adds a new click handler. With JQuery you can completely avoid putting JavaScript click handlers directly on your elements like that. Anytime you call your returnReviews() function it will bind another instance of your click handler to the click event. Here's a simple example: $('<a>link</a>').on('click',function(event){ /* do stuff */ }).appendTo('#somediv');

Answer 3

As david said.. plus a cleaner approach would be better: jsfiddle

function returnReviews() {
  $('html, body').animate({
        scrollTop: $(".bv-action-bar-header").offset().top
    }, 700);
};
$(document).ready(function() {
  var bvrrDiv = $('#bvReview');
  var productId = bvrrDiv.attr("data-productid");
  jQuery('<a/>', {
    "href": "#",
    "data-productid": productId,
    "class": "bv-read-review",
    "click": returnReviews,
    "text": "Read reviews"
  }).appendTo(bvrrDiv);
});