Question

我正在制作一个带有Off Canvas菜单的小型Web应用程序，其中每个项目都执行特定的功能。我与谷歌的研究表明，jQuery的.on("click", ...优于attr onclick("myFunction()")。该函数将从HTML文件（“存储”在隐藏的div中）和带有ajax的动态数据（JSON）中的静态数据加载到视口的div中。

所以这是我的问题：我知道有很多解决方案可以实现这样的目标，但这是一种“优质高效”的方式吗？也许这是一个愚蠢的问题，但我正在学习:)非常感谢你！

HTML

<ul>
    <li><a class="home" href="#">Home</a></li>
    <li><a class="credits" href="#">Credits</a></li>
</ul>

JavaScript （对于静态数据）

$(".sidebar a").on("click", function(ev) {
    // get class from clicked menu item
    var sidebar_class = $(this).attr("class");

    // load static data from hidden div into .container
    // e.g. .credits would load .page-credits
    $(".container").html($(".page-"+sidebar_class).html());

    // hide sidebar again
    hideSidebar();
});

Answer 1

您发布的代码没有错，其他有效的替代方案是：

$(".sidebar a").click(function() { //you don't ned the ev and you can use the click() method that is the same of on("click"

$(".sidebar").on("click", "a", function() { //you have a single delegate listener for all as instead of one listener for each one.

Answer 2

对于动态数据（使用btw静态数据），请使用委托：

$(document).on("click",".sidebar a", function(ev) {
    // get class from clicked menu item
    var sidebar_class = $(this).attr("class");

    // load static data from hidden div into .container
    // e.g. .credits would load .page-credits
    $(".container").html($(".page-"+sidebar_class).html());

    // hide sidebar again
    hideSidebar();
});

这里我使用的是文档，但你应该使用最接近动态内容的静态容器。

如何通过点击正确的方式处理jQuery？

2 个答案: