Javascript jQuery on（）单击事件处理程序不工作

我试图添加一个单击事件处理程序来动态添加链接，以防止默认行为（但允许传播，以便将单击传递给下面的另一个处理程序）

当我这样做时：

$('.menulink').on('click', function(e) {
    e.preventDefault();
    console.log('menu clicked');
    alert('now');
});

在$（窗口）内加载，然后在桌面上正常工作。但是，如果我使用：

$(document).on('click', '.menulink', function(e) {
    e.preventDefault();
    console.log('menu clicked');
    alert('now');
});

在$（document）内。准备就绪后，它将不会触发。仅供参考，我正在使用Jquery 1.11.1

有人能解释一下为什么委派的版本不起作用（我尝试过使用其他可见的父容器，但还是使用$（document）进行测试，但都不起作用）

此外，即使在第一个工作示例中，它在台式机上也能正常工作，但在Android上，它有时会触发链接url，有时只跟随链接url，而不触发单击处理程序，但似乎没有任何逻辑来说明它何时工作，何时不工作

谁能看出我做错了什么！！（请参阅下面的“按要求更新2”，其中包括显示问题的小提琴）

按要求更新：

我使用的是一个径向菜单，它获取一个列表，并使用列表项以编程方式为菜单创建另一个元素。因此，当插件加载时，链接会动态添加到径向菜单（每个项目周围），初始HTML列表为：

<div id="radial_container" class="ui-radmenu-parent visible">
    <ul style="display: none;" class="list">
        <li class="item"><div class="menuopt2"><a class="menulink" href="/url2"><img class="svghover" alt="OPT2" src="/img/pages/2.png"><div class="menulabel">OPT2</div></a></div></li>
        <li class="item"><div class="menuopt14"><a class="menulink" href="/url14"><img class="svghover" alt="OPT14" src="/img/pages/14.png"><div class="menulabel">OPT14</div></a></div></li>
        <li class="item"><div class="menuopt20"><a class="menulink" href="/url20"><img class="svghover currentsectionicon" alt="OPT20" src="/img/pages/20-ro.png"><div class="menulabel">OPT20</div></a></div></li>
        <li class="item"><div class="menuopt74"><a class="menulink" href="/url74"><img class="svghover" alt="OPT74" src="/img/pages/74.png"><div class="menulabel">OPT74</div></a></div></li>
    </ul>
</div>

加载插件后，它将生成以下标记：

<div class="radial_div" style="position: relative;">
    <div style="position: absolute; left: 596.277px; top: 93.8734px;" class="radial_div_item"><div class="menuopt2"><a class="menulink" href="/url2"><img class="svghover" alt="OPT2" src="/img/pages/2.png"><div class="menulabel">OPT2</div></a></div></div>
    <div style="position: absolute; left: 874.839px; top: 11.8205px;" class="radial_div_item"><div class="menuopt14"><a class="menulink" href="/url14"><img class="svghover" alt="OPT14" src="/img/pages/14.png"><div class="menulabel">OPT14</div></a></div></div>
    <div style="position: absolute; left: 1165.16px; top: 9.64253px;" class="radial_div_item"><div class="menuopt20"><a class="menulink" href="/url20"><img class="svghover currentsectionicon" alt="OPT20" src="/img/pages/20-ro.png"><div class="menulabel">OPT20</div></a></div></div>
    <div style="position: absolute; left: 1443.72px; top: 91.8418px;" class="radial_div_item"><div class="menuopt74"><a class="menulink" href="/url74"><img class="svghover" alt="OPT74" src="/img/pages/74.png"><div class="menulabel">OPT74</div></a></div></div>
</div>

根据请求更新2:

我创建了一个大规模简化的小提琴，只显示菜单和相关链接。如果您访问，您可以看到它正确地遵循radmenu的onselect处理程序和.menulink的click处理程序，并由于preventdefault阻止指向menulink href。如果将“$（'.menulink'）。on（'click'，function（e）{”替换为“$（document）。on（'click'，'.menulink'，function（e）{”（这在代码中被注释掉），那么它将运行onselect处理程序，只指向menulink href，而从不运行menulink click处理程序。希望这能更清楚地说明问题

非常感谢

---

Dave

对于动态注入的元素，应使用委托方法。有关更多详细信息，请参阅API文档：

让我们假设原始代码有一个外部DIV，带有

Id=“outerWrapper”

因此，您的处理程序应该如下所示：

$("#outerWrapper").delegate(".radial_div_item div .menulink","click",function(e){
    e.preventDefault();
    console.log('menu clicked');
    alert('now');
});

---

两个问题。首先，样式设置可能会阻止链接成为目标。锚的样式设置使其计算大小为0 x 0（当您将鼠标悬停在链接上时，请使用Chrome DOM检查器查看）

快速修复方法是为它们提供与按钮相同的大小：

.menulink{
    display: block;
    width:30px;
    height:30px;
}

第二个问题是插件在内部停止了click事件的传播，因此委托处理程序将永远看不到它

您可以在插件的

selectMenuitem

末尾注释掉一行代码，以解决当前问题（这是非min版本）：

功能选择菜单项（evt）{
var$this=$（this）；
变量$element=$（evt.target）；
var container=$.radmenu.container；
if（！$element.hasClass（container.itemClz））
$element=$element.closest（“.”+container.itemClz）；
var isConnected=$element.parents（“.”+container.itemClz）.length>0；
var index=$element.index（）；
如果（！已连接）
$this.parents（“.”+container.clz）.radmenu（索引）；
其他的
$this.radmenu（索引）；
//cancelBubble（evt）；显示的代码是正确的。请显示其余相关代码和页面HTML。@Jai：“添加单击事件处理程序以动态添加链接”是线索：）我们需要查看您用于生成类“menulink”的代码谢谢@TrueBlueAusie和Jamie Barker，我刚刚用相关的HTMLCan更新了这个问题，我们也看到了您的其余代码（包括DOM就绪处理程序）？是否列出了任何错误（例如，在Chrome F12控制台中）？该信息已过时。

上的

是正确的，对于任何最新版本的jQuery都是首选。显示的代码应该可以工作（例如），因此还有另一个未知问题。谢谢，我明白你的意思，但即使没有原始处理程序的宽度/高度（例如）。我正在尝试使用委托处理程序，以便在不重新加载页面的情况下销毁和重新创建菜单，但仍保留单击处理程序。因此，如果您查看，您可以看到它最初工作正常，但一旦单击“重新创建菜单”，则会出现相同的问题（这是有意义的）。它似乎不允许我使用委托处理程序（例如$（文档）。on（'click'，'.menulink'，function（e）{），你知道为什么理论上这应该可以解决这个问题吗？非常感谢，我正在研究你的新JSFIDLE。这很有趣：）我现在处于迷恋和想要自杀之间！非常感谢你的帮助！我运行了一些测试，发现插件必须执行
preventDefault
并手动触发链接本身。我在我的一个导航插件中也做了同样的事。并显示此行为（因为我正在重新连接它们中的标准处理程序）。已经说过，我在模糊的源代码中也找不到它在做什么…将继续挖掘。
function selectMenuitem(evt) {
    var $this = $(this);
    var $element = $(evt.target);
    var container = $.radmenu.container;
    if (!$element.hasClass(container.itemClz))
        $element = $element.closest("." + container.itemClz);
    var isInNested = $element.parents("." + container.itemClz).length > 0;
    var index = $element.index();

    if (!isInNested)
        $this.parents("." + container.clz).radmenu(index);

    else
        $this.radmenu(index);

    //cancelBubble(evt);         <<<<<<<<<<<<<<<< Remove this

};