找出哪个关闭按钮关闭了警报框答案

【问题标题】：Find out which close button closed an alertbox找出哪个关闭按钮关闭了警报框
【发布时间】：2018-11-09 14:12:36
【问题描述】：

我有一个带有多个关闭按钮的警告框：

<div data-alert class="alert-box cookies-consent">
    <div class="informative-text">
        Using cookies...
    </div>
    <div class="close-buttons">
        <a href="#" class="close sure">Sure</a>
        <a href="#" class="close opt-out">Opt Out</a>
    </div>
</div>

按照文档的建议，我为关闭事件注册了一个处理程序：

$(document).on('close.fndtn.alert', function(event) {
   console.info('An alert box has been closed!');
   console.info(event);
});

但除非我错过了它，否则该事件似乎不会指示单击了哪个按钮。

我应该如何修改我的 HTML/JS 以找出点击了哪个关闭按钮？我不想修改 Foundation 自己的 JS，我确实希望 UI 行为对于两个按钮、漂亮的过渡和所有内容都保持一致。

【问题讨论】：

您可以捕获触发 Click 事件的元素。例如当您单击“.close”分类元素之一时，此$('.close').click(function(e){ console.log($(e.target).text()) }); 会将文本“Sure”或“Opt Out”记录到控制台。
你不能只使用 event.target 吗？
@Panomosh 太棒了！简单，完美地回答了我的问题。请发布答案，我会接受。
@Rich 我不这么认为——close.fndtn.alert 处理程序中的event.target 是警报框本身，而不是被点击的按钮。
或者为每个按钮设置不同的id属性，一旦点击你就可以在你的事件回调中通过event.target.id来区分

标签： javascript jquery zurb-foundation zurb-foundation-5

【解决方案1】：

这是上面提到的@Panomosh 的工作spinet：

$('a.close').on('click',function(e){
  console.log($(e.target).text())
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div data-alert class="alert-box cookies-consent">
    <div class="informative-text">
        Using cookies...
    </div>
    <div class="close-buttons">
        <a href="#" class="close sure">Sure</a>
        <a href="#" class="close opt-out">Opt Out</a>
    </div>
</div>

您好！

【讨论】：

点击按钮外的 div 会记录 Sure 和 Opt Out :)