jQuery单击除与类链接之外的任何内容答案

【问题标题】：jQuery click anything but link with classjQuery单击除与类链接之外的任何内容
【发布时间】：2014-10-26 03:03:20
【问题描述】：

我在切换课程时遇到了一些问题。

单击删除链接时，新的确认链接会滑入视图。如果还单击了确认链接，则应删除表格行。

如果用户点击任何地方，但此链接应通过切换类 delete-btn-show 和 delete-btn-hide 滑出视图。

希望这可以澄清事情:)

下面是一个表格列表。每行都有一个垃圾桶图标，通过切换类打开一个 div (.delete-btn)。如果一个 delete-btn 是可见的（具有类 .delete-btn-show），它应该通过切换类（delete-btn-show/-hide）隐藏自己，如果点击其中的链接以外的任何其他内容。如果单击链接，则应删除该行。我已经设法显示 div 但无法实现所需的行为。欢迎帮助:)

（jQuery 在文档就绪函数中）

$('.delete-supplier-link').click(function(){
  $(this).parent().parent().find('.delete-btn').toggleClass('delete-btn-show delete-btn-hide');
});


<a class="delete-supplier-link" href="#">
  <i class="fa fa-trash"></i>
</a>

这是表结构

<table class="table table-hover" id="curr-suppliers-listing">
  <tbody>
    <tr>
      <td>
        <span class="suppl-org">
          Some organization
        </span>
        <span class="supplier-of">
          Some product or service
        </span>
        <span class="supplier-contact">
          Some dude
        </span>
      </td>
      <td class="alignR">
        <div class="delete-btn delete-btn-hide">
          <a class="delete-string" href="#">
            Delete
          </a>
        </div>
        <span>
          D.O.P.
        </span>
        <span>
          2011-11-12
        </span>
        <span>
          <a class="delete-supplier-link" href="#">
            <i class="fa fa-trash"></i>
          </a>
        </span>
      </td>
    </tr>
    <tr>
      <td>
        <span class="suppl-org">
          Some organization
        </span>
        <span class="supplier-of">
          Some product or service
        </span>
        <span class="supplier-contact">
          Some dude
        </span>
      </td>
      <td class="alignR">
        <div class="delete-btn delete-btn-hide">
          <a class="delete-string" href="#">
            Delete
          </a>
        </div>
        <span>
          D.O.P.
        </span>
        <span>
          2011-11-12
        </span>
        <span>
          <a class="delete-supplier-link" href="#">
            <i class="fa fa-trash"></i>
          </a>
        </span>
      </td>
    </tr>
    <tr>
      <td>
        <span class="suppl-org">
          Some organization
        </span>
        <span class="supplier-of">
          Some product or service
        </span>
        <span class="supplier-contact">
          Some dude
        </span>
      </td>
      <td class="alignR">
        <div class="delete-btn delete-btn-hide">
          <a class="delete-string" href="#">
            Delete
          </a>
        </div>
        <span>
          D.O.P.
        </span>
        <span>
          2011-11-12
        </span>
        <span>
          <a class="delete-supplier-link" href="#">
            <i class="fa fa-trash"></i>
          </a>
        </span>
      </td>
    </tr>
  </tbody>
</table>

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

我不知道我是否正确理解了您的要求，但是，请检查此小提琴：

http://jsfiddle.net/yp9znej8/

$(function() {
    $(document).on('click', '.delete-btn-show', function() {
        $(this).closest('tr').remove();
        // to remove the table line when clicking the button
        // using .delete-btn-show to only remove when the button is visible
    });
});

如果不是您想要的，您应该更改您的问题以获得更好的可读性。

@已更新

看看这个小提琴：http://jsfiddle.net/L1nsanqf/3/

事情是停止事件的传播，所以它不会与其他事件冲突.. 不知道这是否是最好的方法......但是，有效，我认为这就是你想要的

【讨论】：

这很好。但有一件事，如果类 delete-btn-show 已分配给一个 div（即，一个删除按钮已进入视图），那么也将删除链接滑入视图的其他链接不应将另一个删除链接滑入视图，如果一个已经可见。相反，它应该关闭任何可见的删除链接，然后下次单击垃圾图标时，它应该将删除链接滑动到视图中。换句话说，您一次不能查看多个删除链接。
这是一行代码：jsfiddle.net/L1nsanqf/5 请记住，您应该重构此代码，因为可以进行一些改进..

【解决方案2】：

也许你应该使用这个代码：

$('.delete-btn').each(function () {
   $(this).click(function () {
    $(this).parent().parent().remove();
    });
  });

对于每个以'delete-btn'为css类的div，它定义了链接到删除行的点击事件的函数。

【讨论】：

【解决方案3】：

您可以一直点击气泡直到<body>，检查 $(this) 是否是 delete-btn，并做出相应的回应：

$("body").on( "click", function(){
    if ( $(this).hasClass("delete-btn") ){
        // Do some deleting, this is a delet button!
    } else {
        // Hide the button, this is some other element
        $(".delete-btn").removeClass("delete-btn-show").addClass("delete-btn-hide");
    }
});

【讨论】：