Save and restore "onclick" action on jQuery objects

Question

I want to disable a whole bunch of objects on the page, and then re-enable them later. Since some of them are tags rather than buttons, I disable them by removing their onclick attr. I've tried to store the old handler in a .data(), but unfortunately when I attempt to restore them with $(obj).attr('onclick',$(obj).data('onclick')), it calls the function rather than restoring it to the attribute. And if I try to store it in a different attribute instead of a data, it doesn't store the function, it stores the return value for the function.

Is there any way to accomplish this without re-writing every tag and every onclick handler on my page?

if( doEnable) {

    $(obj).attr('href', $(obj).data('href'));
    $(obj).attr('onclick', $(obj).data('onclick'));


    $(obj).removeClass(EIS.config.classes.disabled);
    $(obj).show();

}
else {
    // Save the things you're going to remove
    $(obj).data('onclick', $(obj).attr('onclick'));
    $(obj).data('href', $(obj).attr('href'));

    $(obj).prop("href", null);
    $(obj).prop("onclick", null);

    $(obj).addClass(EIS.config.classes.disabled);
    $(obj).show();
   }

By the way, this code seems to work fine in Chrome and Firefox, but only sometimes in IE8 and never in IE6. Unfortunately the client tests first in IE6.

bobince · Accepted Answer · 2011-07-11 23:10:35Z

$(obj).attr('onclick', ...

is ambiguous, has results that differ in different versions of jQuery and different browsers. It probably doesn't do what you want. You should avoid using attr on event handlers.

The problem is the disconnect between the onclick attribute and the onclick property. jQuery has tried to brush the difference between an attribute and a property under the carpet in the past, using attr to access both, but they're quite different. This was changed in jQuery 1.6, and partially reverted in 1.6.1, to widespread controversy, confusion and incompatibility.

For many properties, the values of an attribute and the corresponding DOM property are the same; for others, including all properties that aren't strings, they aren't. Event handlers certainly aren't: the property is a Function object, whereas the string attribute might be (a) the original string of the onclick="..." attribute in the HTML, (b) nothing (if the onclick was assigned from script to be a Function object) or (c) unavailable (in older IE).

To access the event handler Function property, use prop() in jQuery 1.6:

$(obj).data('onclick', $(obj).prop('onclick'));
...
$(obj).prop('onclick', $(obj).data('onclick'));

or just use plain old JavaScript which is actually simpler and more readable; jQuery wins you nothing here.

obj._onclick= obj.onclick;
...
obj.onclick= obj._onclick;

Either way this is not going to reliably ‘disable’ elements since they can (and very likely will, if you're using jQuery) have other event listeners registered on them, using addEventListener/attachEvent rather than the old-school event handler interfaces.

Using the Javascript method was the simplest change, and it appears to work.

digitalbath · Accepted Answer · 2011-07-11 23:02:19Z

It looks like saving a function via .data() works just fine:

var f1 = function() { console.log('invoked'); };
$('a').data('func', f1)
var f2 = $('a').data('func');  // 'invoked' is not printed
f1 === f2 // true

so how are you storing the function via .data? if you're doing something like

a = $('a');
a.data('onclick', a.click());  // click handler is invoked here

then you're actually invoking the click handler(s) prematurely, and storing the return value with .data().

--edit--

it appears that .attr(function) invokes the passed function. This is a feature of jQuery. I'd suggest using jQuery's .click() method to attach the function as a click handler.

a = $('a');
a.each(function() {
    this.data('onclick', handler_fn);
    this.bind('click', handler_fn);
});

// later
a.each(function() {
    this.unbind('click');
});

// even later
a.each(function() {
    this.bind('click', this.data('onclick'));
});

amosrivera · Accepted Answer · 2011-07-11 22:50:43Z

0

What about binding the event in jQuery instead of setting the onclick attribute?

$(obj).click($(obj).data('onclick'));

Can we see the code that you use to set the data attribute?

answered Jul 11, 2011 at 22:50

amosrivera

26.6k9 gold badges70 silver badges76 bronze badges

Collectives™ on Stack Overflow

Save and restore "onclick" action on jQuery objects

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related