[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 292
  • Last Modified:

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

0
KCTechNet
Asked:
KCTechNet
  • 6
  • 5
1 Solution
 
GaryCommented:
What do you mean dynamically? With ajax..?
0
 
KCTechNetAuthor Commented:
yes
0
 
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

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

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

  • 6
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now