title: Adding inline onclick event with jQuery
body: <p>This question is actually related to <a href="https://stackoverflow.com/questions/1687790/how-to-remove-onclick-with-jquery">How to remove &quot;onclick&quot; with JQuery?</a>.</p>
  
  <pre><code>&lt;div onclick="doSomething();"&gt;Click me&lt;/div&gt;
  </code></pre>
  
  <p>According to the referenced article, the correct way to remove this inline event for jQuery 1.7+ would be:</p>
  
  <pre><code>// There's only one div in this example
  $( "div" ).prop( "onclick", null ).off( "click" );
  </code></pre>
  
  <p>Say I wanted to add an inline onclick event later on. I tried adding the event with <code>prop</code> and it did not work. However, using <code>attr</code> to add said event did work.</p>
  
  <pre><code>// 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" );
  </code></pre>
  
  <p><strong>Can anyone shed some light on this?</strong> </p>
  
  <p>For removing inline events, the current recommended approach with jQuery 1.7+ is <code>prop</code>. Yet,  for <em>adding</em> inline events, <code>prop</code> does not seem to respond. <strong>Is <code>prop</code> supposed to function for adding inline events or we only use <code>attr</code> for that purpose?</strong> That would seem inconsistent, if true: remove with <code>prop</code> but add with <code>attr</code>. </p>
  
  <p>Thank you for any help in advance.</p>