第一次點擊時沒有觸發jQuery功能

我遇到一個小問題，我的點擊功能在第一次點擊時觸發。該功能確實在第二次點擊上工作。以下是我的代碼示例。第一次點擊時沒有觸發jQuery功能

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，所以任何幫助將不勝感激。

親切的問候，

來源

2016-03-07 Nat

你調用被點擊的元素時的功能：

href='javascript:returnReviews();'

但是那又有什麼功能做：

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

它只是增加點擊處理程序。沒有其他的。 下一次您點擊該元素，即會調用該點擊處理程序。（而另一個將被添加，一遍又一遍，直到你有許多單擊處理一直努力在做的同時同樣的事情。）

而是在一個函數進行包裝，並調用該函數的IN-行，只需添加點擊處理程序的頁面：

$(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並不是真正使用的正確標記。 A button看起來像一個錨點，也許？一個span其懸停時的樣式光標？有很多選擇。你有什麼技術上工作，但如果這是一個問題，可能會導致無障礙（屏幕閱讀器，其他非視覺瀏覽器等）混淆。

來源

2016-03-07 14:21:00 David

嗨大衛，非常感謝你。現在看起來很明顯！非常感謝。至於「一個班級」目前這不是一個大問題，但我現在將其改爲一個跨度。再次感謝。 – Nat

該元素應該被添加到綁定了點擊處理程序的DOM中。你現在編寫它的方式，你有一個叫click的函數，然後添加一個新的點擊處理程序。使用JQuery，您可以完全避免將JavaScript點擊處理程序直接放在您的元素上。每當你調用你的returnReviews（）函數時，它會將你的點擊處理程序的另一個實例綁定到click事件。下面是一個簡單的例子： $('<a>link</a>').on('click',function(event){ /* do stuff */ }).appendTo('#somediv');

來源

2016-03-07 14:27:17 Ecropolis

正如大衛所說..加上一個更清潔的方法會更好：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); 
});

來源

2016-03-07 15:12:43 0x3h

第一次點擊時沒有觸發jQuery功能

回答

相關問題