jquery使动态元素的父元素可点击

Question

我在 td 中有一个跨度。我能够使跨度可点击，但是我无法使父级可点击。

这适用于跨度

$(document).on('click', '.glyphicon-question-sign', function(){
          alert("test");
}); 

我正试图让它为 parent 工作，但事实并非如此。

$(document).on('click', '.glyphicon-question-sign:parent', function(){
          alert("test");
});

这是动态创建的 html。

<td><span class="glyphicon glyphicon-question-sign text-warning">
</span> Unavailable
</td>

Answer 1

您可以使用 :has() 选择器来匹配包含特定类元素的 td。

$(document).on("click", "td:has(.glyphicon-question-sign)", function() {
  alert("test");
})

td {
  width: 100%;
  border: 5px solid #000;
}

span {
  display: block;
  height: 40px;
  width: 100px;
  background-color: #f00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <td>
    <span class="glyphicon glyphicon-question-sign text-warning"></span>
  </td>
</table>