Question

Trying to update some old code from live() to use on() and something is failing miserably.

$('#accordion').on('click','.EditModeDetails', function(event){
    alert('yay');
});

where .EditModeDetails is a class on injected HTML like so:

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

…and #accordion is an accordion control that is loaded at page load.

If I remove the filter, thus:

$('#accordion').on('click', function(event){
    alert('yay');
});

….I get alerts all over the place.

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

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:

http://esc.toypizza.com/sysalert

To see the problem, in the datatable click on http://esc.toypizza.com/_img/details_open.png followed by clicking on the 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.

Answer 1

I think you have an open div that is messing everything up.

<!--Accordian-->

<div id="accordion" class="invis">

    <h3><a href="#">Categories</a></h3>

<div><!--Accordian- panel OPEN-->

The div#accordion is closed several lines below, but the div that has the comment, Accordian- panel OPEN is not closed. This is causing the accordion to be misrendered and some elements are on top of the checkbox, that’s why the event doesn’t get to the check box.