動的要素の親をクリック可能にするjquery

Question

私はtd内にスパンを持っています。スパンをクリック可能にすることはできますが、親をクリック可能にすることに問題があります。

これは、私はこれは親のために働くために取得しようとしていますスパン

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

のために働く、それはしていません。

$(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に一致させることができます。 parent`セレクター：あなたは `のために読んで何をしたかのAPI

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

Answer 2

$("span").on("click", function() { 
 
    $(this).parent("td").css("border-color", "yellow"); 
 
})

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>

私は私が正しくあなたを理解わかりません。私はそうする