jQuery函数不会在首次单击时触发

Question

我有一个小问题，我的点击功能是在第一次点击时触发的。 但是，该功能确实可以在第二次单击时使用。 以下是我的代码示例。

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

我的代码的第二部分（在此处调用该函数）在此处，下面是相关部分的示例。

$(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>");

我想要实现的是在链接的第一次单击上，以便屏幕向下滚动到特定的div。

第一个函数位于JS文件的顶部，而第二个函数位于底部。

我在jQuery方面相对较新，因此任何帮助将不胜感激。

亲切的问候，

Answer 1

单击元素时，您正在调用该函数：

href='javascript:returnReviews();'

但是该功能有什么作用？：

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

它只是添加了一个点击处理程序。 没有其他的。 下次单击该元素时，将调用该单击处理程序。 （然后将一遍又一遍地添加另一个，直到您有许多单击处理程序都试图同时执行相同操作为止。）

无需将其包装在函数中并内联调用该函数，只需将click处理程序添加到页面中：

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

然后，您不必在标记中内联添加它：

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

---

注意，非链接href有点不好。 由于这并不是真正的“锚”本身，那么a是不是真的要使用正确的标签。 看起来像锚的样式的button ，也许吗？ 悬停时为光标设置样式的span ？ 有很多选择。 从技术上讲，您所拥有的会起作用 ，但是如果您担心的话，可能会导致可访问性（屏幕阅读器，其他非可视浏览器等）混乱。

Answer 2

应将元素与绑定的单击处理程序添加到DOM。 当前编写方式，您有一个在click上调用的函数，该函数随后添加了一个新的click处理程序。 使用JQuery，您可以完全避免将JavaScript点击处理程序直接放在这样的元素上。 每当您调用returnReviews（）函数时，它将把您的点击处理程序的另一个实例绑定到click事件。 这是一个简单的示例： $('<a>link</a>').on('click',function(event){ /* do stuff */ }).appendTo('#somediv');

Answer 3

正如大卫所说..再加上一种更清洁的方法会更好： 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);
});