1

Here is the 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>

When clicking any of the inputs, i don't want to click or trigger clicking the parent element(#label_authorize_net). Here is my 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");
    });

Lets say you click the input element in #label_authorize_net, i don't want it to trigger the above jquery, so how would i do that?

2
  • 2
    $('#label_authorize_net').children().on('click', function(e) { e.stopPropagation() })
    – Phil
    Apr 14, 2015 at 4:37
  • Come to think of it, the above isn't going to work very well as all the label's content is within child elements. It's probably better specific elements within the label at which to stop event propagation.
    – Phil
    Apr 14, 2015 at 4:42

2 Answers 2

2

As per my comment above, because your label doesn't have any text content of its own, you can't use .children() or a * selector as you'll always be clicking on a child element. Instead, target specific elements to stop propagation. For example, to ignore the clicks coming from <input> elements...

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

Use stopPropagation() : to avoid bubbling or capturing.

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

Or as Phil suggested, instead of *, use a specific selector to get required children.

2
  • 2
    Using * is a little excessive. You only need to go one level down
    – Phil
    Apr 14, 2015 at 4:41
  • Yes @Phil, added your suggestion to the answer.
    – Shaunak D
    Apr 14, 2015 at 4:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.