javascript - 如何确保 jQuery 中的 onclick 事件适用于该类新更新的元素？

Question

我有一组包含类 app-context-link 的链接在我的页面上 – 只是一些 <a>菜单元素。

它们是在页面从 JSON 接收到的一些数据加载页面时生成的。

然后，我在单击 jQuery 函数上应用以下内容，以确保当用户单击这些元素之一时，执行特定的过程:

    $(".app-context-link").on('click', function(e) {
         e.preventDefault();
          // do something
    }

问题是，当用户单击其中一个项目时，我想突出显示他们单击的项目，对 JSON 执行一些操作，然后向用户返回一个具有同一类其他元素的新菜单app-context-link – 在这种情况下，“旧”onclick 函数不适用于新添加的项目，对吧？因此我无法让他们以同样的方式行事。

有人知道我该如何解决这个问题吗？

我知道我可能必须使用回调等非常仔细地重写所有内容，但也许 jQuery 内部已经有一个更简单的解决方案，而我只是错过了一些东西？

作为奖励轨道 - 如果我决定保持菜单不变，而只是突出显示单击的元素(通过附加类)，我会怎么做？抱歉，如果最后一个问题听起来很愚蠢，但我是新手，感觉有点困惑......

谢谢!

Answer 1

您需要委托(delegate)事件，例如:

$(document).on('click', ".app-context-link", function(e) {
         e.preventDefault();
          // do something
    });

现在选择器将在每次点击时进行过滤。

document 是一个示例，通常，您更愿意将其绑定(bind)到最近的静态容器