第一次点击时没有触发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功能

回答

相关问题