title: Can't modify properties of element using jquery .on()
body: <p>I'm currently trying to write what I feel like should be a very simple chrome addon using jquery. I have a tool I use for work that our IT department has stopped supporting Chrome with, because they have enough on their plate troubleshooting IE. Their solution however, was simply to remove the old onClick functions and added the property disabled="diabled" to all of our buttons.</p>
  
  <p>My simple work around for this is using jquery to remove the disabled properly and append the onClick functionality. I've gotten this to work in a few instances, but the problem I'm running into is with new instances of buttons created using ajax forms. </p>
  
  <p>Here's the code I'm currently trying to work with:</p>
  
  <pre><code>function restoreFunctionality() {
      $("#RestoreDefaultsButton").removeProp("disabled").attr("onClick", "OnRestoreDeviceClientClick()");
  
  }
  RestoreFunctionality();
  </code></pre>
  
  <p>Now, this works fine for the initial load, however I'd also like this to work for every button that is to be created in the future. To do this, I added:</p>
  
  <pre><code>$("#RestoreDefaultsButton").on("restoreFunctionality", function(event) {
      $("#RestoreDefaultsButton").removeProp("disabled").attr("onClick", "OnRestoreDeviceClientClick()");
  });
  </code></pre>
  
  <p>This, however, does not work for me but also does not provide any sort of console error message telling me why it won't work. I can't seem to find an example of what I want. I see examples in the jquery doc where it can be called by clicking somewhere or something like that, however what I want is for it to just simply "work". Just look for new instances of that button ID and make the changes.</p>
  
  <p>Is on() not the function I want to use in jquery 1.11.1? Am I somehow using this incorrectly? Any guidance to point me in the right direction would help.</p>
  
  <p><strong>Edit for clarification:</strong>
  I am not trying to edit the same button multiple times in multiple locations. I am trying and willing to create code individually for each button that comes up, given I know the ID of each one. </p>
  
  <p>Here is an example of something I have that is currently working:</p>
  
  <p>The line of code for the button reads: </p>
  
  <pre><code>&lt;input type="button" name="RestoreDefaultsButton" value="Submit" 
     id="RestoreDefaultsButton" disabled="disabled" class="aspNetDisabled InlineButtonStyle"&gt;
  </code></pre>
  
  <p>The code that I am using and that actually works just fine is now:</p>
  
  <pre><code>$("body").on("click", "#RestoreDefaultsButton", restoreDefaultFunctionality());
  </code></pre>
  
  <p>and restoreDefaultFunctionality() is simply:</p>
  
  <pre><code>$("#RestoreDefaultsButton").removeProp("disabled").attr("onClick", "OnRestoreDeviceClientClick()");
  </code></pre>
  
  <p>Again, the above code works just fine. What I seem to have trouble with is that not all of my buttons are present on load, I may click a link that loads a model on the same page/url with a form that has additional buttons. That button might read:</p>
  
  <pre><code>&lt;input type="button" name="OpenToolkitButton" value="Submit" id="OpenToolkitButton" disabled="disabled" class="aspNetDisabled InlineButtonStyle"&gt;
  </code></pre>
  
  <p>Which is almost exactly the same as the original example, it's just been loaded after the script ran for the first time. </p>
  
  <p>What I am looking for is a solution to make all individually specified buttons that I need, when they occur, to have that disabled removed and a specific onclick function added. </p>