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);
});