如何以正确的方式处理 jQuery？

Question

我正在制作一个带有 Off Canvas 菜单的小型 Web 应用程序，其中每个项目都执行特定的功能。我对 Google 的研究表明，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

对于动态数据（与静态数据一起使用），使用委托：

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

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