在可点击的行内单击可跨度

Question

我有以下代码：

＆＃13;

＆＃13;

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

＆＃13;

<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 -->

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

试试这个。您将它绑定到每个不是.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>

Answer 2

这是因为事件冒泡而发生的。要防止它使用Component1：

stopPropagation

这样，当你单击一行时它将打开模态，但是当点击跨度时，它只会在不打开模态的情况下发出警告

Answer 3

它可以帮到你：

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

干杯

Answer 4

clickableB span类中没有数据，您需要添加一些文字或图片然后才能正常工作

$(".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">clickableB</span>
        <span style="color:orange" class="clickableB fa fa-warning">clickableB</span>
        <span style="color:red" class="clickableB fa fa-minus-square">clickableB</span>
      </td>
    </tr>
  </tbody>
</table>

Answer 5

而不是

<span style="color:green" class="clickableB fa fa-check-square"></span>

我会使用

<span onclick='functionOfChoice();' style="color:green"> ....