javascript - 在可点击的行内使 span 可点击

Question

我有以下代码:

$(".clickable").click(function() {
  window.location = $(this).data("target");
});
$(".clickableB").click(function() {
  alert('I got a click');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
  <thead>
    <tr>
      <th>Employee</th>
      <th>Total hours</th>
      <th>Comments</th>
      <th>Options</th>
    </tr>
  </thead>
  <tbody>
    <tr data-toggle="modal" data-target="#events-modal" class="clickable success">
      <td>Pedro</td>
      <td>1</td>
      <td>This is a very loooooooooooooooooooong text</td>
      <td>
        <span style="color:green" class="clickableB fa fa-check-square"></span>
        <span style="color:orange" class="clickableB fa fa-warning"></span>
        <span style="color:red" class="clickableB fa fa-minus-square"></span>
      </td>
    </tr>
  </tbody>
</table>

<div class="modal fade" id="events-modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body" style="height: 400px">
                <p>One fine body&hellip;</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

然后，我想要得到的是在行中单击时显示模态，但在单击图标/跨度时收到警报。每次我点击图标时，模式都会出现。

Answer 1

试试这个。您将它绑定(bind)到每个不是 .noclick 的 td 并使用 .parent 获取数据目标。

$(".clickable td:not(.noclick)").click(function() {
  console.log("modal click");
  window.location = $(this).parent().data("target");
});
$(".clickableB").click(function() {
  alert('I got a click');
});

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<table class="table">
  <thead>
    <tr>
      <th>Employee</th>
      <th>Total hours</th>
      <th>Comments</th>
      <th>Options</th>
    </tr>
  </thead>
  <tbody>
    <tr data-toggle="modal" data-target="#events-modal" class="clickable success">
      <td>Pedro</td>
      <td>1</td>
      <td>This is a very loooooooooooooooooooong text</td>
      <td class="noclick">
        <span style="color:green" class="clickableB fa fa-check-square"></span>
        <span style="color:orange" class="clickableB fa fa-warning"></span>
        <span style="color:red" class="clickableB fa fa-minus-square"></span>
      </td>
    </tr>
  </tbody>
</table>