Override inline click event in jQuery

Question

I have links in a navigation that look similar to this

<a id="navform" href="#" tabindex="-1" onclick="mojarra.ab(this,event,'action','@form','content');return false" class="active"><span>Policy</span></a>

I am checking for form changes and trying to disable the onclick event for the links when there are changes and enable them if once the user saves the form.

$(':input').on('change', function() {
        formChanged = true;
    });

$('nav a').on('click', function(e){
        if(formChanged){
            e.preventDefault();
            $(this)[0].onclick = null;
        }       
    });

I have tried preventDefault and nulling the event according to some answers I found on here, but no luck. Could someone please tell me how to fix this?

UPDATE:

Thanks to all your answers, I got some ideas and figured how to fix it:

if($('.policy-form')){
        $(':input').on('change', function() {
            formChanged = true;
            $('nav a').each(function(){
                var handler = $(this).attr('onclick');
                $(this).removeAttr('onclick');
                
                $(this).on('click',function(){
                    if(formChanged){
                        invokeDialog("warning");
                        formChanged = false;
                        $(this).attr('onclick', handler);
                    }
                });
            });
            
        });

why do you have inline handlers when you can have a dedicated handler? — Rajaprabhu Aravindasamy
– Rajaprabhu Aravindasamy, Commented Mar 10, 2016 at 19:03

Przemek · Accepted Answer · 2016-03-10 20:33:15Z

2

Plain JavaScript one-liner

Use

document.getElementById('navform').onclick = null;

This is because only the last onclick defined will run and here we override it with null.

Note that it would be way better if you would just avoid onclick in your HTML, or if you would at least modify mojarra.ab() appropriately, so that it performs any actual actions only when you desire.

Demo:

document.getElementById('one').onclick = null;

<a id="one" href="#" onclick="alert(true)">Doesn't alerts</a>
<br/>
<a id="two" href="#" onclick="alert(true)">Does alerts</a>

EDIT

Vide comment, here is an example of toggling old onclick on and off:

var button = document.getElementById('button');
var oldOnclick = button.onclick;

document.getElementById('toggle').addEventListener('click', function() {
  button.onclick = button.onclick !== null ? null : oldOnclick;
})

<input id="button" type="button" onclick="alert('Test')" value="Alert"/>
<br/>
<br/>
<input id="toggle" type="button" value="Toggle above button"/>

edited Mar 10, 2016 at 20:33

answered Mar 10, 2016 at 19:08

Przemek

4,0042 gold badges28 silver badges34 bronze badges

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

5 Comments

zer0 Over a year ago

How can I enable it again?

Przemek Over a year ago

@ultimatecoder: I've updated my answer, with an example of toggling original onclick on and off.

zer0 Over a year ago

Thank you but this didn't work either. I however got some ideas from this and solved it on my own.

Przemek Over a year ago

@ultimatecoder: Are you sure you used it the right way? My demo should work even for IE9+. Do you want to say that the first button still alerts, after second one was clicked? I'm glad that you solved your problem, anyway :).

zer0 Over a year ago

I don't know why but the onclick retained its event when I did it your way.

Mike · Accepted Answer · 2016-03-10 19:08:14Z

1

$('nav a').on('click', function(e){
    $(this).removeAttr('onclick'); // add this line to remove inline onclick
    if(formChanged){
        e.preventDefault();
        $(this)[0].onclick = null;
    }       
});

answered Mar 10, 2016 at 19:08

Mike

7871 gold badge7 silver badges11 bronze badges

Comments

Christian Benseler · Accepted Answer · 2016-03-10 19:16:46Z

1

You can use the .off() method:

$('nav a').off('click');

One good practive is to add an namespace to your events.

$('nav a').on('click.somenamespacehere', function(e){

});

...

$('nav a').off('click.somenamespacehere');

In this case, you can specify later which events you want to remove (with the off method)

edited Mar 10, 2016 at 19:16

answered Mar 10, 2016 at 19:11

Christian Benseler

8,0839 gold badges42 silver badges73 bronze badges

Comments

gabesoft · Accepted Answer · 2016-03-10 19:07:14Z

0

You can't do it that way because the on('click' event and the inline one are two different events and there's no way to tell which would happen first. But, you could replace the inline handlers with your own handler like so

on('click', function(e) {
  if (formChanged) {
    mojarra.ab(...);
  }
});

answered Mar 10, 2016 at 19:07

gabesoft

1,2289 silver badges6 bronze badges

Comments

gaetanoM · Accepted Answer · 2016-03-10 21:33:47Z

0

With an inline click function there are many possibilities to control the logical flow or order of executing the functions attached to the same event.

One possibility is to change the inline code so that you can define a first function and based of the result of this you may decide if execute or not the next function.

My snippet:

// assuming the inline onclick function is like:
function mojarra_ab(_this, event, _action, _form, _content) {
  $('<p>Executed function: mojarra_ab</p>').appendTo('body');
}

function myNewClick() {
  $('<p>Executed function: myNewClick</p>').appendTo('body');
  if ($('#yesNo option:selected').val() == 'true') {
    return true;  // return true to execute the mojarra_ab function
  } 
  return false;  // return false if you don't need to execute the mojarra_ab function
}

$(function () {
  $('nav a').attr('onclick', function(index, attr) {
    return 'if (myNewClick() == true) {' +  attr + '}';
  });
});

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

Choose if to run myNewClick and then mojarra_ab: <select id="yesNo">
    <option value="true" selected>True</option>
    <option value="false">False</option>
</select>
<nav>
    <a id="navform" href="#" tabindex="-1" onclick="mojarra_ab(this,event,'action','@form','content');return false"
       class="active"><span>Policy</span></a>
</nav>

edited Mar 10, 2016 at 21:33

answered Mar 10, 2016 at 19:13

gaetanoM

42.1k6 gold badges45 silver badges63 bronze badges

1 Comment

zer0 Over a year ago

This worked partially (and the only one of all answers here). The new function introduced fires but breaks the mojarra_ab(..) function

Collectives™ on Stack Overflow

Override inline click event in jQuery

UPDATE:

5 Answers 5

Plain JavaScript one-liner

EDIT

5 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

UPDATE:

5 Answers 5

Plain JavaScript one-liner

EDIT

5 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related