jQuery on（）click事件处理程序不起作用

Question

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

当我做：

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

在$（window）.load中，则它可以在桌面上正常工作。 但是，如果我使用：

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

在$ {document）.ready中，则永远不会触发。 仅供参考，我正在使用Jquery 1.11.1。

谁能提出委托版本为什么不起作用的建议（我曾尝试使用其他可见的父容器，但又回到使用$（document）进行测试，但无济于事）。

另外，即使在第一个工作示例中，它也可以在台式机上正常工作，但在Android上，它有时会触发，有时仅遵循链接网址，而不会触发点击处理程序，但是似乎什么逻辑都没有起作用，何时不起作用。 ！

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

要求的更新：

我正在使用http://tikku.com/jquery-radmenu-plugin创建一个放射状菜单，该菜单接受一个列表，并使用列表项以编程方式为菜单创建另一个元素。 结果，当插件加载时，链接被动态添加到径向菜单中（围绕每个项目），初始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：

我创建了一个大大简化的小提琴，仅显示菜单和相关链接。 如果您访问http://jsfiddle.net/7asLq/2/，则可以看到它正确地遵循了radmenu的onselect处理程序和.menulink的单击处理程序，并且由于preventdefault而阻止了对菜单链接href的定向。 如果将“ $（'。menulink'）。on（'click'，function（e）{”替换为“ $（document）.on（'click'，'.menulink'，function（e）{”在代码中被注释掉了），然后它运行onselect处理程序，仅指向menulink href，而从不运行menulink click处理程序，希望这样可以更清楚地显示问题？

非常感谢，

戴夫

Answer 1

几个问题。 首先，样式可能会阻止链接被定位。 锚的样式设置为使它们的计算大小为0 x 0（将鼠标悬停在链接上时，请使用Chrome DOM检查器查看此大小）。

快速解决方案是为它们提供与按钮相同的大小：

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

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

您可以在插件的selectMenuitem末尾注释掉一行代码，以解决当前的问题（这是非最低版本）：

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

};

这是JSFiddle中的结果： http : //jsfiddle.net/7asLq/10/

Answer 2

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

假设原始代码的外部DIV为Id = "outerWrapper" 。

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

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