Jquery 不适用于在上下文菜单中创建的动态元素答案

【问题标题】：Jquery not applying on dynamic elements created in context menuJquery 不适用于在上下文菜单中创建的动态元素
【发布时间】：2013-10-18 19:31:15
【问题描述】：

我有一个包含$('a').on('click', function () {alert($(this).attr('class')); }); 的脚本在我的 contextmenu 函数中，我创建了一个带有链接的列表

$(function () {
$('a').on('contextmenu', function (event) {
        $("<ul id='menu'></ul>")
        .append('<li><a href="#" class="test">Test 1</a></li>')
        .append('<li><a href="">Test 2</a></li>')
        .appendTo("body")
        .css({ top: event.pageY + "px", left: event.pageX + "px" });
        return false;
    });

});

但是，当单击列表中的链接时，第一段代码（单击事件）不会触发。但是，它会触发页面上的所有其他链接。我该如何解决这个问题，以便我的脚本适用于动态元素

【问题讨论】：

你试过了吗？ stackoverflow.com/a/1207393/742624
是的，我使用的是“on”功能而不是“live”
对，但请注意在您想要作为回调中的“this”的动态元素的包含元素上调用 on。所以这样的事情应该可以工作：$(document).on('click', 'a', function(){...});.
也试过了，还是不行……
似乎工作：jsfiddle

标签： dynamic contextmenu jquery-on

【解决方案1】：

只是对另一个SO question 的重述。

在 $(document) 上调用 jQuery on method 并提供“选择器”选项会将回调绑定到与选择器参数匹配的动态添加的元素。

也就是说，这个：

$(document).on('click', 'a', function () {
  alert( $(this).attr('class') ); 
});

而不是这个：

$('a').on('click', function () {
  alert($(this).attr('class')); 
});

【讨论】：