クラス内のボタンIDを参照する

Question

<div id="dialogButtons" class="opportunityEditorPopup">  
    <span id="closed" class="label checkOption" style="display: none;"><input type="checkbox">Mark this as closed</span> 
    <span class="testButtons" style="display: inline;"> 
      <button id="closeOpportunityButton" class="jqButton imaged ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" title="Close this opportunity" role="button"><span class="ui-button-text">Close</span></button> 
      <button id="newOrderButton" class="jqButton imaged ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" title="Raise New Quote" role="button"><span class="ui-button-text">New Quote</span></button> 
    </span> 
</div> 

現在、次のHTMLがあり、JQueryで "closeOpportunityButton"を参照しようとしています。

私はトラブルがこれに取得を抱えていて、次の試してみました：

$('.testButtons #closeOpportunityButton').click(function(){ 
    console.log("test") 
}); 

と

$('#dialogButtons .testButtons #closeOpportunityButton').click(function(){ 
    console.log("test") 
}); 

どちらも仕事で。

アイデア？

Answer 1

あなたの選択に子セレクタを使用してみてください。以下のコードスニペットです：。

$('.testButtons > #closeOpportunityButton').click(function(){ 
 
    console.log("test") 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="testButtons" style="display: inline;"> 
 
      <button id="closeOpportunityButton" class="jqButton imaged ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" title="Close this opportunity" role="button"><span class="ui-button-text">Close</span></button> 
 
      <button id="newOrderButton" class="jqButton imaged ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" title="Raise New Quote" role="button"><span class="ui-button-text">New Quote</span></button> 
 
    </span>