click event not triggering

Question

I'm not sure why this code doesn't work. It may be because the checkbox is on a coldfusion div page. When the checkbox is clicked, I want to update the individuals record.

The ReInitialize function works when I click on that button. The code to zebra stripe the table works on initial form load, but not on subsequent loads when it posts to itself. The checkbox click function never gets hit. I can set a breakpoint in Firebug and it never stops.

<script type="text/javascript">
$(document).ready(function () {
    $('#ReInitialize').click(function () {
        var ReInitAnswer = confirm('Are you sure you want to start over from scratch?');
        if (ReInitAnswer) {
            $.ajax({
                type: "POST",
                url: "cfc/basic.cfc?method=TruncateTemp",
                error: function (xhr, textStatus, errorThrown) {
                    // show error
                    alert(errorThrown);
                } /*
                ,
                success: function (msg) {
                    alert("Data Saved: " + msg);
                } */
            });
            $('#ReInitialize').attr('checked', true);
        } else {
            alert('canceled');
        }
    });

    var table = $('#articles'),
        rows = table.find('tr'),
        cells, background, code;

    for (var i = 0; i < rows.length; i += 1) {
        cells = $(rows[i]).children('td');
        code = $(cells[0]).value();
        if (code % 2 == 0) {
            background = '#e29e6e';
        } else {
            background = '#f9cf80';
        }
        $(rows[i]).css('background-color', background);
    }

    $('.notdupe').bind('change', function () {  // <----------------------
        // If checked
        if ($(this).is(":checked")) {
            $.ajax({
                type: "POST",
                url: "cfc/basic.cfc?method=SetNotDupe",
                data: "indivNum=" + $(this).value() + "&SetValue=" + $(this).checked(),
                error: function (xhr, textStatus, errorThrown) {
                    // show error
                    alert(errorThrown);
                }
            });
        }
    });
});
</script>

<cfif qPages.not_dupe_flag>
    <input class="notdupe" type="checkbox" name="indivID" value="#userid#" checked />
<cfelse>
    <input class="notdupe" type="checkbox" name="indivID" value="#userid#" />
</cfif>

I changed it from a click event to a change event.

Answer 1

It looks like it should bind correctly. But I think there is an issue with scope with the AJAX call inside the $('.notdupe').bind() function.

Within the $.ajax.data code, I think the $(this) no longer refers to $('.notdupe') but to the AJAX event. Also, I'm not sure what .checked() is supposed to do.

$('.notdupe').bind('change', function (e){
    // If checked
    if ($(this).is(":checked")) {
        $.ajax({
            type: "POST",
            url: "cfc/basic.cfc?method=SetNotDupe",
            data: "indivNum=" + $(e.target).value() + "&SetValue=" + $(e.target).is(":checked")),
            error: function (xhr, textStatus, errorThrown){
                // show error
                alert(errorThrown);
            }
        });
    }
});

Answer 2

Have you tried using .on() instead of .click()?

Replace:

$('#ReInitialize').click(function() {

With:

$('#ReInitialize').parent().on('click', '#ReInitialize', function() {

I am not clear what all of your code does, but if #ReInitialize gets replaced at some point, you will lose your click handler. This implementation of .on() will apply to #ReInitialize and any future instantiations.

P.S. if you are using an older version of jQuery, it would be .live('click', function() {