1

This question is actually related to How to remove "onclick" with JQuery?.

<div onclick="doSomething();">Click me</div>

According to the referenced article, the correct way to remove this inline event for jQuery 1.7+ would be:

// There's only one div in this example
$( "div" ).prop( "onclick", null ).off( "click" );

Say I wanted to add an inline onclick event later on. I tried adding the event with prop and it did not work. However, using attr to add said event did work.

// Does not add event
$( "div" ).prop( "onclick", "doSomething();" ).on( "click ");

// Neither does this
 $( "div" ).prop( "onclick", "doSomething();" );

// This one works
$( "div" ).attr( "onclick", "doSomething();" );

// This one works, too
$( "div" ).attr( "onclick", "doSomething();" ).on( "click" );

Can anyone shed some light on this?

For removing inline events, the current recommended approach with jQuery 1.7+ is prop. Yet, for adding inline events, prop does not seem to respond. Is prop supposed to function for adding inline events or we only use attr for that purpose? That would seem inconsistent, if true: remove with prop but add with attr.

Thank you for any help in advance.

Community
  • 1
  • 1
user3621633
  • 1,371
  • 3
  • 25
  • 38
  • 1
    You shouldn't add a click event with either `attr()` or `prop()`. Use `click()` or `on()`. As for when to use [attr()](http://api.jquery.com/attr/) and [prop()](http://api.jquery.com/prop/), just read the docs. – j08691 Feb 02 '16 at 16:05
  • Why do you want to add "inline" events? You're entering the dangeorus zone of browser's compatibility. Use jQuery events to avoid compatibility problems. – JotaBe Feb 02 '16 at 16:07
  • I understand that. But I'm talking about inline events, not jQuery events. I am preserving the inline event. A third-party plugin is actually creating the inline event and removing and adding the inline event is a workaround for something else. I didn't want to get into all of that. i just wanted to understand the concept and theory behind why `prop` works when removing but does not work when adding inline events. Thank you. – user3621633 Feb 02 '16 at 16:08

1 Answers1

2

I'm assuming your question is just out of interest, and not because you have a problem. Because if you had a problem with binding a click event, you should just use jQuery's click(). So to answer your question, I think the difference is that:

$( "div" ).prop( "onclick", null ).off( "click" );

Doesn't remove the onclick="" from the attribute of the DOM, but just disables the 'back-end' handler of the click event, if you know what I mean. The source code will still say onclick="" (the attribute will still be there), but the actual binding of the click event to whatever comes in between the "" is broken.

With removeAttr() or attr('onclick',''), the onclick attribute is actually removed entirely from the source/HTML/DOM (and can no longer be re-enabled, unles the attribute is added again).

Logically, you CAN add something back to the source/HTML, by adding an onclick attribute like so: attr('onclick','doSometing();'. This will still have to be activated though (with a bind(click), or click()), because the element is already in the DOM. You can however not activate an onclick with prop("onclick","doSometing();") because this requires the attribute to be there in the first place.

So in short: you can DISABLE (not remove, but disable) an inline onclick with prop, but you cannot ENABLE it, if it's non-existent.

Also, in general, don't add inline onclick attributes, and if you can, don't use them at all :)

Laurens Swart
  • 1,124
  • 7
  • 20
  • This was very helpful, thank you! You actually answered the question. If a question on a test is how to add an inline onclick event `prop` or `attr`, you wouldn't write on the test "don't do that, use `on` and `click` instead." Sure, it's a good answer, but it doesn't actually answer the question. So, I'm very thankful you took the time to talk about why `prop` does not add inline events. – user3621633 Feb 02 '16 at 16:20
  • 1
    You're most welcome! :) There's a very very important difference between the `onClick` attribute being there, and the CLICK event actually being bound to that object. They are two completely different things, and one can be present without the other, or the other way around. i.e. you can have an object without an `onClick`, but still a click-event bound to it by `click()`, OR you can have an object WITH an `onClick`, but this `onClick` can have been disabled :) – Laurens Swart Feb 02 '16 at 16:26
  • Thank you. Yes, that makes sense. I did and do understand the basic difference between `prop` and `attr`, but I thought it was odd how the related question said to use `prop` to remove inline events, yet `prop` was not working when adding inline events. But you're explanation was clear and most helpful and I hope it serves others well. Again, I sincerely appreciate your time with this matter. Thanks, again! – user3621633 Feb 02 '16 at 16:31