事件被多次绑定答案

【问题标题】：event is bound multiple times事件被多次绑定
【发布时间】：2019-04-10 09:36:32
【问题描述】：

当我点击一个按钮时，我正在调用这段代码：

       divElement.find('#_bajarFactura').one('click', function (event) {
            event.preventDefault();

            if (tooltipMenu)
                tooltipMenu.hide();

            alert('Se baja el archivo de la factura en lugar de verla en el navegador.');

            divElement.find('#_bajarFactura').off('click', '**');

            return false;
        });

divElement 是一个弹出窗口，每次单击该按钮时都会打开。

请注意，我正在调用“一个”方法...问题是即使我正在使用该方法，在我多次单击按钮后，处理程序也会被多次调用。

我试图通过使用“off”方法调用来强制解除事件绑定，但没有成功。

有什么帮助吗？

编辑：这是 divElement：

<div id="tooltip_content">
    <ul class="list-group">
        <li class="list-group-item">
            <a id="_bajarFactura" href="#" title="Bajar factura"><i class="sl-icon-cloud-download"></i>Bajar factura original</a>
        </li>
        <li class="list-group-item">
            <a id="_verFactura" href="#" title="Ver archivo de la factura"><i class="sl-icon-doc"></i>Ver factura original</a>
        </li>
        <li class="list-group-item">
            <a id="_verDetalle" href="#" title="Ver detalles de la factura"><i class="sl-icon-magnifier-add"></i>Ver Detalle</a>
        </li>
        <li class="list-group-item">
            <a id="_reEnviar" href="#" title="Re-enviar factura a un e-mail"><i class="icon-Mail-Forward"></i>Re-enviar</a>
        </li>
    </ul>
</div>

【问题讨论】：

我不明白。您说单击按钮时会打开divElement，但#_bajarFactura（我猜那是按钮）在divElement 内...您可以发布您的HTML 的精简版本吗？
您是否正在动态重新创建#_bajarFactura？是否有可能多次调用创建事件侦听器的代码？
不不不... #_bajarFactura 不是按钮.....它只是打开的弹出窗口中的一个元素。我用 divElement 编辑了问题
如果您使用id 作为选择器，则不需要使用.find，只需使用选择器即可。 $("#_bajarFactura")。其次，您正在调用e.preventDefault，这将阻止.one 方法知道它是否被调用过一次。最后.off("click", "**") 将删除所有委托事件，但click 事件不是委托事件。它已明确添加到您的元素中。
@jstuardo 在一个页面中不应有多个具有相同id 的元素。如果您不使用href，那么您可以使用带有样式的跨度标签吗？这些问题似乎会变得更加复杂。

标签： jquery events

【解决方案1】：

事件处理程序附件one() 非常直观。事件处理程序将只运行一次。

如果不是因为您多次设置事件侦听器。

for (var i=0; i<5; i++) {
  $('#_bajarFactura').one('click', function(event) {
    console.log('handler executed');
  });
}

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

<button id="_bajarFactura">Click me!</button>

注意你是如何显示工具提示的。

你应该在关闭它时调用$('#_bajarFactura').off('click');。

注意：不要使用('#_bajarFactura').off('click', '**')。正如 @zfrisch 告诉你的那样，它只会删除委托的事件。来自docs：

要从元素中移除所有委托事件而不移除非委托事件，请使用特殊值“**”。

【讨论】：