Question

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

当我这样做时：

$('.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。

任何人都可以建议为什么委托版本不起作用（我尝试过使用其他可见的父容器，但又回到使用$（文档）进行测试，但都没有工作）。

此外，即使在第一个工作示例中，它在台式机上也能正常工作，但在Android上它有时会触发，有时只是跟随链接URL而不触发点击处理程序，但似乎没有任何关于它什么时候起作用的逻辑它没有！

谁能看到我做错了什么!! （请参阅下面的“请求更新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而指向menulink href。如果你替换“$（'。menulink'）。on（'click'，function（e）{”with“$（document）.on（'click'，'。menulink'，function（e）{”（this在代码中被注释掉）然后它运行onselect处理程序并直接指向menulink href并且从不运行menulink点击处理程序。希望这更清楚地显示问题？

非常感谢，

戴夫

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/

让我们假设原始代码有Id = "outerWrapper"的外部DIV。

所以你的处理程序应该像这样：

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

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

2 个答案: