Question

我有一个按钮，上面有两个点击处理程序：

向用户显示本机JavaScript确认对话框以确认操作。
在单独的表单元素上设置一些属性，然后提交该表单。

他们是基于jQuery的，看起来像这样：

$('[data-confirm]').on('click', function (e) {
  if (! confirm($(this).data('confirm')) {
    e.preventDefault();
    e.stopImmediatePropagation();
  }
});

$('.js-remove-item').on('click', function (e) {
  e.preventDefault();

  console.log('clicked');

  var $form = $('#remove-item-form');

  $form.attr('action', $(this).data('url'));
  $form.submit();
});

按钮HTML如下所示：

<button type="button"
        class="btn btn-primary js-remove-item"
        data-confirm="Are you sure you want to remove this item?">

但是，当显示确认对话框时，控制台会“点击”。我只希望在用户确认操作时触发该事件监听器。

我该怎么做？

Answer 1

找出解决方案。

对于“删除项目”逻辑，我没有将类添加到按钮本身，而是将其添加到父元素。使用冒泡，表示按钮本身上的任何侦听器都被触发（确认对话框）。如果该事件传播，它将对其父节点执行此操作，该父节点具有“删除项目”类名和逻辑绑定。

确认对话框后的JavaScript单击事件

1 个答案: