add onclick attribute via jquery

Question

I have a link that has onclick attribute, which unfortunately I cannot modify. What I wanna do is to call and execute another function before onclick function is called. Upon researching I figured out I cannot do that as onClick has first priority.

In order to achieve what I want here is what I want to do. Using Jquery remove onclick attribute and then add modified onclick attribute as soon as page loads.

For example: I currently have this.

<a href="#" class='myclass' onclick="Joomla.submitbutton('article.apply')">link</a>

I want to make it look like this

<a href="#" class='myclass' onclick="MyFunction(); Joomla.submitbutton('article.apply')">link</a>

That way, it will execute myfunction before default function.

I am not good with Jquery, can someone help. Thanks.

where are you checking for the condition for removing and adding onclick function? javascript? codebehind? — Venkata Krishna
– Venkata Krishna, Commented Dec 2, 2013 at 21:04

Musa · Accepted Answer · 2020-12-18 23:08:19Z

2

The attr() method sets or returns the attributes and values of the selected elements.

$('.myclass').attr('onclick', "myFunction()");

edited Dec 18, 2020 at 23:08

Musa

97.9k17 gold badges123 silver badges144 bronze badges

answered Dec 18, 2020 at 12:29

Sachin Jeremiay

5544 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jason P · Accepted Answer · 2013-12-02 21:15:14Z

1

I'm not sure about cross-browser compatibility, but at least in Chrome, you can get a reference to the function to be called, remove the click handler, then bind your own:

http://jsfiddle.net/guXV3/

<a href="#" onclick="clickHandler();">click me</a>

function clickHandler() {
    console.log('inline handler');
}

$(document).ready(function () {
    $('a').each(function () {
        var originalHandler = $(this)[0].onclick;
        $(this).removeAttr('onclick');
        $(this).on('click', function () {
            console.log('new handler');
            originalHandler();
        });
    });

});

Clicking the link here logs new handler, then inline handler.

answered Dec 2, 2013 at 21:15

Jason P

27k3 gold badges34 silver badges45 bronze badges

1 Comment

AR_HZ Over a year ago

Thank You, I had to make some tweaks as per my need but this help a lot.

johnsoe · Accepted Answer · 2013-12-02 21:07:23Z

0

To add your handler.

$('.myclass').click(function(){
    //your function code goes here.
});

To remove the previous handler.

$('.myclass').attr('onclick', '');

answered Dec 2, 2013 at 21:07

johnsoe

6741 gold badge5 silver badges13 bronze badges

Comments

Marjan Nikolovski · Accepted Answer · 2013-12-02 21:19:22Z

0

Check the fiddle for full example.

$(function(){
   var $some_link = $('#some_link');
   var onClick = $some_link[0].onclick;
   $some_link.unbind('click', onClick);
   $some_link.attr('onclick', null);
   $some_link.on('click', function(e){ myBeforeCall(e); onClick(e); });
});

function myBeforeCall(){
   alert('Before');   
}

answered Dec 2, 2013 at 21:19

Marjan Nikolovski

8489 silver badges22 bronze badges

Comments

charlietfl · Accepted Answer · 2013-12-02 21:25:58Z

0

To add to the inline you can do this:

$(function () {
    $('.myclass').attr('onclick', function (i, attr) {        
        return 'MyFunction();' + attr;
    });
})

This will change the html to the way you have it shown and MyFunction() fires first

DEMO

answered Dec 2, 2013 at 21:25

charlietfl

172k14 gold badges125 silver badges154 bronze badges

1 Comment

AR_HZ Over a year ago

this was helpful as well. But since there were more than one link to deal with I had to use other code. Thanks

Collectives™ on Stack Overflow

add onclick attribute via jquery

5 Answers 5

Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related