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

KCTechNetAsked:
Who is Participating?
 
GaryConnect With a Mentor Commented:
Ahh I forgot, you need to bind to an existing element
Change container to an element that exists to start with

$('container').on('change','.check1',function() {
0
 
GaryCommented:
What do you mean dynamically? With ajax..?
0
 
KCTechNetAuthor Commented:
yes
0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
GaryCommented:
$(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

0
 
KCTechNetAuthor Commented:
You can find all my code in another open question:
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_28126558.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.
0
 
KCTechNetAuthor Commented:
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.
0
 
GaryCommented:
Have you got a live page to look at, or your fiddle.
0
 
KCTechNetAuthor Commented:
This is on our Intranet.  Not sure how to use fiddle without the ASP data
0
 
KCTechNetAuthor Commented:
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???
0
 
GaryCommented:
That is why I changed your code to use .on which will bind to any dynamic content.

Is check1 a tab?
0
 
KCTechNetAuthor Commented:
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

0
All Courses

From novice to tech pro — start learning today.