jQuery从许多具有相同.class的元素中更改了Clicked元素的CSS背景

Question

I'm working on a simple jQuery script that i want to change the background color of the clicked element.

So here is my code:

<dt>
<input id="p_method_banktransfer" value="banktransfer" type="radio" name="payment[method]" title="Bank Payment"  class="radio validation-passed" autocomplete="off"/>ev
<label for="p_method_banktransfer">Банков превод </label>
</dt>

I have many <dt>...</dt> tags

Here is the CSS of <dt> :

.opc-wrapper-opc .payment-block dt { 
background: #3399CC;
border-radius: 2px;
margin: 0px 0px 13px;
position: relative;
}

So actually it seems that i am clicking on the label or on the input but the background that i want to change is of that dt element.

How i can make it ?

Answer 1

$('body').on('click', 'dt', function(){
  $(this).css('background','red'); // substitute your color for red
});

UPDATE

To change all <dt/> OTHER than the clicked one back to the original color:

$('body').on('click', 'dt', function(){
  $('dt').not(this).css('background', '#3399CC'); // change back to original color
  $(this).css('background','red'); // substitute your color for red
});