javascript - jQuery 单击除类链接以外的任何内容

Question

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

更新为 js-fiddle

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

如果用户点击除此链接以外的任何地方，则应通过切换类 delete-btn-show 和 delete-btn-hide 将链接滑回 View 之外。

希望这能澄清事情:)

下面是一个表格列表。每行都有一个垃圾桶图标，它通过切换类打开一个 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>

Answer 1

我不知道我是否理解正确你的要求，但是，检查这个 fiddle :

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
    });
});

如果这不是您想要的，您应该更改您的问题以提高可读性。

@更新

看看这个 fiddle :http://jsfiddle.net/L1nsanqf/3/

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