Question

我有一个表，在<tr>的任何地方每次点击都会触发jQuery，但是在其中一个<td>元素中有一个按钮，但是我无法触发它的点击，因为<tr>上的点击优先，有没有办法让它不会发生？< / p>

我尝试了event.preventDefault();功能，但它没有按照我想要的那样做。

代码如下所示：

$(document).ready(function() {
  $("#myTable .tr").on('click', function() {
    console.log("TR")
  });

  $("$myTable .tr .button").on('click', function() {
    event.preventDefault();
    console.log("Button")
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="myTable">
  <tr class="tr">
    <td class="button"><button type="button">Click Me!</button>
    </td>
  </tr>
</table>

Answer 1

我试着了解你需要什么，然后为你创建一个简单的演示

＆＃13;

$(document).ready(function() {
  $("#myTable tr").click(function(e) {
    console.log("TR")
  });

  $("#myTable tr .button").click(function(e) {
    e.stopPropagation()
    console.log("Button")
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="myTable" width="100%" border="1">
  <tr class="tr">
    <td>
      <button type="button" class="button">Click Me!</button>
    </td>
  </tr>
</table>

＆＃13;

单击Jquery上的子元素

1 个答案: