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() {
        //...
    });
}

它只是添加了一个点击处理程序。没有其他的。下次单击该元素时，将调用该单击处理程序。（并且会一遍又一遍地添加另一个，直到你有许多点击处理程序都试图同时做同样的事情。）

不是将其包装在函数中并在线调用该函数，只需将点击处理程序添加到页面中：

$(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有点不好用。因为这不是实际上＆＃34;锚＆＃34;本身，a并非真正使用正确的标记。一个button样式看起来像一个锚，也许？一个span在悬停时设置光标的样式？有很多选择。你有什么技术上工作，但如果这是一个问题，可能会导致可访问性混淆（屏幕阅读器，其他非可视浏览器等）。

Answer 2

应该将元素添加到DOM，并将点击处理程序绑定到该DOM。你当前编写它的方式，你有一个名为click的函数，然后添加一个新的点击处理程序。使用JQuery，您可以完全避免将JavaScript单击处理程序直接放在您的元素上。无论何时调用returnReviews（）函数，它都会将click处理程序的另一个实例绑定到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);
});

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

3 个答案: