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');
});