Add onclick to element, but keep current onclick event

Question

Is it possible to add a javascript event to a DOM element that already has a onclick event, but I want to keep that event property.

I have radio buttons like this:

<input type="radio" name="checkout-payment" value="56" id="checkout-payment-56" class="checkout-radio checkout-payment-radio checkout-payment-radio" onclick="paymentChanged(this);" />

in which I want to add

window.location.href=window.location.href

while keeping the original onclick, but I have no access to the html, I can only modify through javascript.

so my desired code will be

<input type="radio" name="checkout-payment" value="56" id="checkout-payment-56" class="checkout-radio checkout-payment-radio checkout-payment-radio" onclick="paymentChanged(this); window.location.href=window.location.href" />

In the code you provided, the _onclick_ event you want to add is already present in the HTML. Is it the case in the original code? — blex, Jul 27 '14 at 08:54
@blex yes this is the original code in the first code field. the second one is what i want it to look like. my first post had a error as i by mistake posted the desired code instead of the current code. i have edited my original post. — SolidSnake, Jul 27 '14 at 20:03

Rafiek · Answer 1 · 2014-07-27T22:06:20.757

0

You could try:

var curHandler = $('#checkout-payment-56').attr("onclick");
    $('#checkout-payment-56')[0].onclick = null;
    $('#checkout-payment-56').click(function () {
       window.location.href=window.location.href;
    });

edited Jul 27 '14 at 22:06

answered Jul 27 '14 at 08:54

Rafiek

1,434
1
16
24

1

Or, in plain javascript `document.getElementById('checkout-payment-56').addEventListener("click", function(){window.location.href=window.location.href;});`. – blex Jul 27 '14 at 08:58
@blex, yes, that's also possible ;) – Rafiek Jul 27 '14 at 09:00
I edited the answer to compensate for storing the inline click event. – Rafiek Jul 27 '14 at 09:06
1

You do store it, but never reuse it? – blex Jul 27 '14 at 09:07
if OP was me (i guess it means original poster? xD) then i am trying to add a onclick to a dom that already has onclick function, but without removing the already onclick.. its a closed ecommerce system so i have no access to the html markup so i figured using JS would be more appropriate. but im not that good at js yet.. – SolidSnake Jul 27 '14 at 17:10
Then just add another handler with .click(), this doesn't overwrite the original behaviour. – Rafiek Jul 27 '14 at 22:04

score 0 · Answer 2 · answered Jul 27 '14 at 09:13

Wrap the

window.location.href=window.location.href

in function, lets call it

onRadioButtonClick()

then, just do

var self = this; //keep the context of the file
$("[name=checkout-payment]").on('click', function () {
       onRadioButtonClick.call(self); //call the method with the normal context.
      //continue code..

});

blex · Answer 3 · 2014-07-28T06:53:20.830

0

If you want to add this to every .webshop-checkout input[type="radio"], you could do it that way:

$('.webshop-checkout input[type="radio"]').click(function(){
    window.location.href=window.location.href;
});

JS Fiddle Demo

edited Jul 28 '14 at 06:53

answered Jul 27 '14 at 20:08

blex

24,941
5
39
72

Thanks alot, this will work. But is it not possible to make it "universal" ? the problem with this solution is that each input has their own onclick attribute, and i need it to fit to all radio inputs on that page (by the body class and input[type=radio]). so that .webshop-checkout input[type="radio"] will have that onclick added eventhough it already has one. – SolidSnake Jul 28 '14 at 00:03
@SolidSnake ok, I edited the code, would this suit your needs? – blex Jul 28 '14 at 06:48

score 0 · Accepted Answer · answered Jul 28 '14 at 01:03

0

I actually found out there was a much simpler way to acheive my desired result.

    $( '.webshop-checkout input[type="radio"]' ).click(function() {
  location.reload(true);
});

i am sorry i was not clear in my original post, and it has been edited.

answered Jul 28 '14 at 01:03

SolidSnake

59
8

That would be a way to do it, just keep [**this**](http://stackoverflow.com/questions/2405117/difference-between-window-location-href-window-location-href-and-window-location) in mind. – blex Jul 28 '14 at 06:50

score 0 · Answer 5 · answered Jan 14 '16 at 12:28

0

 $("#checkout-payment-56" ).bind( "click", function(evt) {
       console.log('that works');
     //sessionStorage.setItem(evt.target.id,evt.target.className);
    });

answered Jan 14 '16 at 12:28

Matoeil

6,851
11
54
77

Please consider expanding your answer to include explaination. – Magisch Jan 14 '16 at 14:49

Add onclick to element, but keep current onclick event

5 Answers5