Link to home
Create AccountLog in
Avatar of KCTechNet
KCTechNetFlag for United States of America

asked on

checkbox change event not running

I have a form being built dynamically.  In the process I am adding the class 'check1' and 'check2' to certain check boxes.

I have the following code to test the 'change' event of the checkbox but neither alert is showing.  I try it in jsfiddle and I see it works fine.

I tried taking it out of the document.ready function but perhaps I got the syntax wrong.  

Currently, in document.ready I have:
$(document).ready( function(){
        $('.check1').change(function() {
            alert('clicked');
            $('#outputArea').text(this.checked ? "is checked" : "is not checked");
        });
        
        $("input[type=checkbox]").change(function() {
                alert('clicked');
        });

Open in new window

Avatar of Gary
Gary
Flag of Ireland image

What do you mean dynamically? With ajax..?
Avatar of KCTechNet

ASKER

yes
$(document).ready( function(){
        $('.check1').on("change",function() {
            alert('clicked');
            $('#outputArea').text(this.checked ? "is checked" : "is not checked");
        });
        
        $("input[type=checkbox]").on("change",function() {
                alert('clicked');
        }); 
})

Open in new window

You can find all my code in another open question:
https://www.experts-exchange.com/questions/28126558/create-tabs-dynamically-issues-with-href.html

I changed line 94 to:
strTD+= "<td class='Side" + intColumnLoop + "'> <input type='checkbox' class='check" + intColumnLoop + "'";

Open in new window


and added the alerts shown in my original post.
your last post didn't work either.  I have a feeling it has something to do with line 94 where I 'build' the checkboxes, but I don't see it.
Have you got a live page to look at, or your fiddle.
This is on our Intranet.  Not sure how to use fiddle without the ASP data
Ok.  I think the issue is where I am placing stuff:
$(document).ready( function(){
        createTabs();
        
        $('#outputArea').text($('body').html());
        $('.check1').on("change",function() {
            alert('clicked');
            $('#outputArea').text(this.checked ? "is checked" : "is not checked");
        });

Open in new window


in the '#outputArea', I get the hml as it looks BEFORE the call to the createTabs() function.  The function is on top of the document.ready.  Should all my functions be inside the document.ready section?  Or is there a way to 'refresh' the html because I am guessing the '.check1'.change is not finding any classes because it is referencing  HTML that is not 'drawn' yet???
That is why I changed your code to use .on which will bind to any dynamic content.

Is check1 a tab?
ASKER CERTIFIED SOLUTION
Avatar of Gary
Gary
Flag of Ireland image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
looks like I gotta read up on binding.  Not sure what you did and why but it worked. :)

Yes, checkboxes are within tabs.   I combined your code with existing tab stuff:
        $("#tabs" )
            .tabs({
                beforeActivate: function(event,ui){
                    //  if (startCheck){return (saveForm(1)==1);}       //uncomment this line if you want to save at each tab click
                },
                select: function( event, ui ) {
                    currTab=$(ui.tab).attr('href');
                    var n = currTab.lastIndexOf("#");
                    currTab = currTab.substring(n+1);
                }
            })
            .on('change','.check1', function() {
                alert('clicked');
                $('#outputArea').text(this.checked ? "is checked" : "is not checked");
            });  

Open in new window