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.

If you can provide the html once it hits the browser, that would be more useful. — James Montagne
– James Montagne, Commented Jan 19, 2012 at 18:12
what is  supposed to do? it's not a valid js comment. use /* and */ — roberkules
– roberkules, Commented Jan 19, 2012 at 18:14
and additional to @JamesMontagne's comment: proper formatting (indention) helps readability. — roberkules
– roberkules, Commented Jan 19, 2012 at 18:15
@roberkules  are CFML (Cold Fusion Markup Language) comments. They are server-side so anything within them will not be output to the browser. — Jasper
– Jasper, Commented Jan 19, 2012 at 18:26
if you're too lazy - no offense :) - to do the indention: just drop your code @ jsbeautifier.org and hit the beautify button. — roberkules
– roberkules, Commented Jan 19, 2012 at 19:33

Chris May · Accepted Answer · 2012-01-19 19:10:58Z

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);
            }
        });
    }
});

answered Jan 19, 2012 at 19:10

Chris May

82211 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user990016 Over a year ago

I'm trying to update the individuals record with the value of the checked attribute (true of false).

Chris May Over a year ago

Ok... so is there a .checked() method you define somewhere else? If not, it should throw an error. I changed it into $(e.target).is(":checked")

Jeff B · Accepted Answer · 2012-01-19 18:27:23Z

0

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() {

edited Jan 19, 2012 at 18:27

answered Jan 19, 2012 at 18:14

Jeff B

30.1k7 gold badges64 silver badges91 bronze badges

8 Comments

James Montagne Over a year ago

Not my downvote, but what would changing click to on accomplish?

Jeff B Over a year ago

I thought he was saying that the first click worked, but not the second. If his #ReInitialize element got replaced by some ajax response, then the on() would keep the handler attached to the DOM and not the non-existant original element, no?

user990016 Over a year ago

Sorry,  is a Coldfusion comment.

Jasper Over a year ago

@JeffB Nope. $(<selector>).on(<event>, <event-handler>) is the same as $(<selector>).bind(<event>, <event-handler>). To delegate the binding you need $(<root-element>).on(<event>, <selector>, <event-handler>);. If you don't set a <root-element> then you aren't delegating. As a note: .live() is depreciated so using it is not a good forward thinking policy, instead use .delegate with document as the <root-element>: $(document).delegate(<selector>, <event>, <event-handler>);

James Montagne Over a year ago

That's actually not true. on used the way you have it there would do the same as click. You are referring to event delegation. That would be $("ancestor").on("click", "#ReInitialize", function...) where ancestor is a selector of some ancestor element which will not be replaced.

|

Collectives™ on Stack Overflow

click event not triggering

2 Answers 2

2 Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related