基础拆分按钮单击事件

Question

我有一个Zurb分割按钮，我试图获取按钮的点击事件，但不是按钮的分割部分[下拉列表]。

当我在链接上使用jQuery时，它会以一种我无法使用拆分按钮的方式捕获整个链接。

如何让分割按钮成为，并且只捕获“主”按钮的单击事件？ 我尝试在跨度中添加一个ID，但这会弄乱Foundation的内部作品。

<div class="session_on"> <a href="#" id="start" class="button split">Start<span data-dropdown="drop_on"></span></a>
    <br>
    <ul id="drop_on" class="f-dropdown" data-dropdown-content>
        <li><a href="#">Link 1</a>
        </li>
        <li><a href="#">Link 2</a>
        </li>
    </ul>
</div>

Javascript：

$("#start").click(function () {
    console.log('clicked');
})

Answer 1

考虑使用另一个内联元素包装您的按钮文本。并听听这个包装元素。

例如，您可以使用

包装它

<a href="#" id="start" class="button split">
    <i id="start-main">Start</i>
    <span data-dropdown="drop_on"></span>
</a>

您需要处理此父级和父级的填充，以便它覆盖您想要侦听的整个按钮。请参阅JsFiddle以供参考。

Answer 2

我不完全确定你要做什么，但只要[span]是[a]的一部分，你就会在点击时获得[a]的点击事件及其所有内容在[a]。