在类中引用按钮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>