How to use JQuery 'on()' with class selector filter?
<p>Trying to update some old code from  <code>live()</code> to use <code>on()</code> and something is failing miserably.</p>

<pre><code>$('#accordion').on('click','.EditModeDetails', function(event){
    alert('yay');
});
</code></pre>

<p>where <code>.EditModeDetails</code> is a class on injected HTML like so:</p>

<pre><code>&lt;li class="instructionText"&gt;
    &lt;input value="EditModeDetails" class="EditModeDetails" name="EditModeDetails" type="checkbox"&gt;
    &lt;label for="EditModeDetails"&gt;Edited text replaces existing text.  To add new text, check this box &lt;/label&gt;
&lt;/li&gt;
</code></pre>

<p>...and <code>#accordion</code> is an accordion control that is loaded at page load.</p>

<p>If I remove the filter, thus:</p>

<pre><code>$('#accordion').on('click', function(event){
    alert('yay');
});
</code></pre>

<p>....I get alerts all over the place.</p>

<p>Have looked all over for a sample that uses a class instead of an element selector and having no luck.</p>

<p>EDIT:  Many thanks for the suggestions, guys, but nothing is working thus far  The version of JQuery that is loaded is ver--1.7.1.  Here is the link to the actual development:</p>

<p><a href="http://esc.toypizza.com/sysalert" rel="nofollow">http://esc.toypizza.com/sysalert</a></p>

<p>To see the problem, in the datatable click on <img src="http://esc.toypizza.com/_img/details_open.png"> followed by clicking on the <img src="http://esc.toypizza.com/_img/up_arrow.png"> that appears.  Next, click on the accordion section "Details" (above the "Current Issues" section that opens as the default).  You will see the offending checkbox to the right of the "Clear" button.</p>
