как не вызвать событие щелчка на детей

Question

Вот это HTML:

<label id="label_authorize_net" for="payment_authorize_net" class="for_guest_and_register"> 
         <strong>Credit Card</strong> 
         <br/> 
         <input type="radio" name="payment_method" class="payment_authorize_net" id="payment_authorize_net" value="authorize_net" /><?php echo $lang_client_['checkout']['ADDITIONAL_CHARGE']; ?> <?php echo $currency_l.num_formatt($authorize_net['surcharge']).$currency_r; ?> 
         <input type="hidden" class="value-payment" value="" /> 
         <div id="credit_card_fields"> 
         <label for="cc_number"> 
          Card Number: 
          <input type="text" class="required cc_field" name="cc_number" id="cc_number" /> 
         </label> 
         <label for="cvc_number"> 
          CVC Number: 
          <input type="text" class="required cc_field" name="cvc_number" id="cvc_number" /> 
         </label> 
         <label for="exp_date"> 
          Expiration Date: 
          <input type="text" class="required cc_field" name="exp_date" id="exp_date" value="mm/yy" /> 
         </label> 
         </div> 
        </label> 

При нажатии любой из входов, я не хочу, чтобы нажать или вызвать, нажав на родительский элемент (#label_authorize_net). Вот мой JQuery:

$("#label_authorize_net").click(function(){ 
     $css_display = $("#credit_card_fields").css("display"); 
     if($css_display === "none") $("#credit_card_fields").css("display","block"); 
     else $("#credit_card_fields").css("display","none"); 
    }); 

Допустим, вы щелкните элемент ввода в #label_authorize_net, я не хочу, чтобы вызвать выше JQuery, так как бы я это сделать?

Answer 1

Согласно моему комментарию выше, поскольку ваш ярлык не имеет никакого текстового содержимого, вы не можете использовать .children() или селектор *, так как вы всегда будете нажимать на дочерний элемент. Вместо этого задайте конкретные элементы, чтобы остановить распространение. Например, чтобы игнорировать щелчки исходя из <input> элементов ...

$("#label_authorize_net").on('click', function() { 
    // your code 
}).find('input').on('click', function(e) { 
    e.stopPropagation(); 
}); 

Answer 2

Используйте stopPropagation(): чтобы избежать пузырьков или захвата.

$("#label_authorize_net *").click(function(event){ 
    event.stopPropagation(); 
}); 

Или, как Phil предложил, вместо *, использовать определенный селектор, чтобы получить необходимые детям.