How can I attach some jQuery to a function that already exists?

Question

I have the following mark-up:

    <dt>

        <input id="p_method_checkmo" value="checkmo" type="radio" name="payment[method]" title="Check / Money order" onclick="payment.switchMethod('checkmo')" class="radio" />
        <label for="p_method_checkmo">Check / Money order </label>
</dt>
    <dt>
        <input id="p_method_ccsave" value="ccsave" type="radio" name="payment[method]" title="Credit Card (saved)" onclick="payment.switchMethod('ccsave')" class="radio" />
        <label for="p_method_ccsave">Credit Card (saved) </label>
</dt>

I need to snag some jQuery onto the click (or change) events. After lots of debugging, I've found that the inline onclick event is over-ruling and jQuery selectors that I try to use. Is there any way I can plug some jQuery to run whenever that method (payment.switchMethod) is run? I thought about using preventDefault() to stop the click event on document ready, but I'm not sure if this is a good idea, or the best way of going about things.

I CANNOT edit the mark up in any way, unfortunately.

Any advice is massively appreciated. I've attached the jQuery below for reference:

    // Check for payment selection.  Upon selection mark it as 'hitpayment' in db
jQuery("input[name=payment\\[method\\]]:radio").change(function(){
    alert('hello');
    var cartPalPayment = {};

    cartPalPayment['user_id'] = '<?=$_SESSION['user_id']?>';
    cartPalPayment['referer'] = '<?=$_SESSION['referer']?>';
    cartPalPayment['license_key'] = cartPalLicenseKey;

    jQuery.ajax({
            url: 'integration/magento1.4/set_payment.php',
        cache: false,
            dataType: 'jsonp',
        data: cartPalPayment
        });
});

Answer 1

I have no ide if this will work but you can try.

jQuery("input[name=payment\\[method\\]]:radio").unbind('click');

Answer 2

Boy-o-Boy!

jQuery("input[name=payment\\[method\\]]:radio")

That is a long selector for that markup, isn't it?

jQuery('#p_method_checkmo, #p_method_ccsave')

should do it in your example snippet.

Beside that, you have a quoting problem here:

cartPalPayment['user_id'] = '<?=$_SESSION['user_id']?>';

should be

cartPalPayment['user_id'] = "<?=$_SESSION['user_id']?>";

or if user_id is a javascript variable

cartPalPayment['user_id'] = '<?=$_SESSION[' + user_id + ']?>';

--

That should attach an event handler to those input elements. It will get executed beside your onclick inline handler. If you want to remove that inline handler do

$('#p_method_checkmo').attr('onclick', '');

or

$('#p_method_checkmo').removeAttr('onclick');

I'm not quit sure if the .removeAttr() works crossbrowser on that approach.

Answer 3

Ok so it sounds like you need to run the original function as well. Just swap out (redefine) the payment.switchMethod function with your own, and call it from within your new function:

var evilFunction = payment.switchMethod;
// Ninja-swap payment.switchMethod() with your own.
payment.switchMethod = function(evilArgs) {
   // Do whatever you want here
   alert("Got your nose");

   // Call original function
   evilFunction(evilArgs);
};

Just be sure to run the above on document load (or anytime AFTER payment.switchMethod was defined). You're effectively injecting your own code into payment.switchMethod so you don't even need to attach event listeners to the element.