Prevent onClick event handler from executing

The jQuery event.stopPropagation() and/or event.preventDefault() -- can these be used to stop an onClick="xyz();" on a <button> or <td> ?? I don't want the xyz() function to run AT ALL. Does anybody know how to do this? Nothing I try prevents the xyz() itself from running.

Setup:

<td onClick="javascript:xyz();">123</td>

Thanks.

Paragram
paragramAsked:
Who is Participating?
 
leakim971PluritechnicianCommented:
>can these be used to stop an onClick="xyz();" on a <button> or <td> ??
No

>I don't want the xyz() function to run AT ALL.
What about (inside $(document).ready block) :
$("td").attr("onclick", null);

Open in new window

?
0
 
paragramAuthor Commented:
leakim --

By George, this seems to work! Thank you.

I know it wasn't part of the original question, but can you now tell me, how do I turn the onClick behavior back on once I've nulled it? (I will "Accept" your solution, but could you help me with this additional issue, please?)

Thanks.

Paragram
0
 
leakim971PluritechnicianCommented:
Did you try :

backup = $("td").attr("onclick");
$("td").attr("onclick", null);

so later :

$("td").attr("onclick", backup);

this work for only one... I let you compose your code for multiple backup...
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
paragramAuthor Commented:
No, that DOESN'T work. In fact, since I know the handler I want is xyz(), if what you suggested had worked, I guess it would have been better to just do

$("td").attr("onclick",xyz);

which I what I tried before my previous post (i.e., after I tested your solution to my original issue and saw that it worked.) But the "restore" DOESN'T work!

So I'll give you the points ;-) but I need to figure out how to turn it back on. There must be a different syntax for assigning the handler?

(On the next go-round I'll assign the points, but please keep up with this thread until we get this solved? Thanks!)

Paragram
0
 
leakim971PluritechnicianCommented:
$("td").attr("onclick", "javascript:xyz()");
0
 
paragramAuthor Commented:
That syntax for restoring the handler doesn't work either.
0
 
leakim971PluritechnicianCommented:
0
 
paragramAuthor Commented:
It turned out that the document type declaration was part of the problem.

Once I put in <!DOCTYPE html> at the top, your "attr onclick null" and "attr onclick xyz" started working. (For anyone else reading this: go back up and look at leak's previous suggestions. They probably ALL work (!) if you get the DOCTYPE in there!)

Thank you for all the help

Paragram
0
 
paragramAuthor Commented:
leakim971:

Can I have another bite at the apple here? (If not, I'll post this to a new thread).

It turns out that there were 2 problems with the solution. One seems to involve dynamic controls. But instead of chasing that down, I realize there's a bigger issue. That is, to turn the handlers back on, I need some very complex arguments that I just don't have a way of keeping (dependent on the actual <td> being processed.)

Maybe there's a way to deal with that, but instead I tried simply event.stopPropagation(), since there was a child <td> that sees the click event before the <td> I'm concerned with.

And, that approach works great to stop processing the click. But now the important Question: is there a way to REENABLE the ORIGINAL handler?

The situation is a <td> inside of a <td> The outer <td> has the handler I want, which is turned off by running stopPropagation on the inner <td>. So, how do I STOP the stopPropagation() so the outer <td>'s handler can see the click?

Thanks again.

Paragram
0
 
leakim971PluritechnicianCommented:
if you need to enable and stop a process/code, maybe you can use a flag instead playing directly with events.

function handlerXYZ() {
     if(flagXYZ) {
           // run code
     }
}

so to disable, just use :
flagXYZ = false;
to reenable :
flagXYZ = true;
0
 
paragramAuthor Commented:
Ah, would it were so! Anyway, I found a (?) solution at stackoverflow. But first of all, I can't just modify the handler because it is inside a dll and I can't get to it. These menus are an add on.

But someone showed me a simple technique:

$('td.myclass').off('click');

This neatly turns off the previous handler, which was stopPropagation()

!! But naturally, there's still a problem, only it looks like a side effect that is impacting some partial postback logic elsewhere on the page. For some reason, executing the off('click') is causing multiple postbacks. Pretty weird. (Just having a simple test setup with buttons to disable and enable the menu worked great -- see my post on stackoverflow.

http://stackoverflow.com/questions/12559183/confusion-regarding-event-bubbling-and-stoppropagation-and-then-permitting-bubbling
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.