mixing my jQuery click events with existing object's onclick attribute

Question

I'm using jQuery but dealing with markup produced from JSF pages. A lot of the elements have onclick attributes provided by the JSF code (which isn't my realm).

Example:

<div onclick="[jsf js to submit form and go to next page]">submit</div>

I'm trying to add some client side validation with jQuery. I need something like this pseudo code:

$('div').click(function(e){
  if(myValidation==true){
     // do nothing and let the JS in the onlick attribute do its thing
  } else {
     $error.show();
     // somehow stop the onclick attribute JS from firing
  }

})

Is there a best-practice for handling this?

One thought I had was that on page load, grab the onclick attribute's value, delete the onclick attribute from the object, then...well, that's where I get lost. I could cache the JS as text in a data- attribute, but I'm not sure how to fire that off later.

user193130 · Accepted Answer · 2014-04-03 05:20:23Z

3

Just use eval to run onclick attribute code in your jQuery click event if you want it. You need to remove onclick attribute

<div onclick="alert('hi');">submit</div>

-

$(document).ready(function() {
    var divClick = $('#theDiv').attr('onclick');
    $('#theDiv').removeAttr('onclick');
});

$('#theDiv').bind('click', function(e) {
    if (myValidation == true) {
        // do nothing and let the JS in the onclick attribute do its thing
        eval(divClick);
    } else {
        $error.show();
        // somehow stop the onclick attribute JS from firing
        e.preventDefault();
    }
});

edited Apr 3, 2014 at 5:20

user193130

8,3074 gold badges39 silver badges65 bronze badges

answered Sep 21, 2011 at 23:23

Mohsen

66.1k37 gold badges164 silver badges187 bronze badges

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

9 Comments

DA. Over a year ago

but I don't want to run it at all.

Mohsen Over a year ago

Edited, take a look. When you bind events via jQuery it don't run the onclick code if you preventDefault

Mohsen Over a year ago

Edited, take a look, you need to remove onclick

DA. Over a year ago

are you sure? Here's a sample that, at least in Firefox, seems to indicate onclicks fire before any bound jQuery event: jsbin.com/ubipis

DA. Over a year ago

ah! Sorry, I posted before I saw your addendum. Yes, I think that might work. Trying now...

|

Ariel · Accepted Answer · 2011-09-21 23:24:11Z

3

Either return false or use:

e.stopPropagation()

or

e.preventDefault()

Depending on your needs.

answered Sep 21, 2011 at 23:24

Ariel

26.8k5 gold badges62 silver badges71 bronze badges

1 Comment

DA. Over a year ago

This is getting a lot of up votes, but in and of itself does not seem to be a solution as onclick events fire before any bound jquery events run. In other words, the onclick fires before I can even tell it to preventDefault

Goran Obradovic · Accepted Answer · 2011-09-21 23:33:25Z

1

EDIT

You can save original event:

var originalEvent = $('div').attr("onclick");
$('div').attr("onclick", false);

$('div').click(function(e) {
        if (false) {
            // do nothing and let the JS in the onlick attribute do its thing

            eval(originalEvent);
        }
        else {
            alert("error");
            // somehow stop the onclick attribute JS from firing
        }

    });

take a look at this http://jsfiddle.net/j4jsU/

Change if(false) to if(true) to see what hepens when form is valid.

edited Sep 21, 2011 at 23:33

answered Sep 21, 2011 at 23:21

Goran Obradovic

9,0419 gold badges52 silver badges79 bronze badges

5 Comments

DA. Over a year ago

It appears that inline onclick attribute JS fires before any bound jQuery event handlers do. So I think part of the solution is that I need to get rid of the onclick attr altogether on page load so it's not even there.

user359135 Over a year ago

here, if i remember correctly, it is the return false that's stopping the event bubbling (to be clear).

Goran Obradovic Over a year ago

I have changed answer based on jsfiddle experiment

DA. Over a year ago

The problem is that the onclick JS will fire before any bound jQuery event. Example: jsbin.com/ubipis

Goran Obradovic Over a year ago

See updated solution, I have thought that this might not work, as there is no propagation to inline event here that you can cancel. The trick is in $('div').attr("onclick", false); that removes inline event, so you can call it when you want.

fdfrye · Accepted Answer · 2011-09-21 23:28:19Z

0

I like e.stopProgation() and e.preventDefault(), but if you do not prefer that strategy, you could also manually remove the onclick() attribute and manually call the function it was using upon successful validation.

Different strokes..

answered Sep 21, 2011 at 23:28

fdfrye

1,0997 silver badges14 bronze badges

Comments

mowwwalker · Accepted Answer · 2011-10-04 05:00:51Z

0

Why can't you do something like:

div=document.getElementById('test');
oldClick=div.onclick;
bol=false;
div.onclick=function(){
    if(bol){
        oldClick();
    }
    else {
       alert('YOU SHALL NOT RUN INLINE JAVASCRIPT'); 
   }
}

answered Oct 4, 2011 at 5:00

mowwwalker

17.5k30 gold badges109 silver badges166 bronze badges

Collectives™ on Stack Overflow

mixing my jQuery click events with existing object's onclick attribute

5 Answers 5

9 Comments

1 Comment

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

9 Comments

1 Comment

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related