Dynamic field generation with CSS Togglebuttons and .on() binders

Question

Question:

I am trying to build a dynamic form using jQuery. There are a few standard html form inputs in a row in addition to a CSS stylized "hidden checkbox" toggle button. (Example)

The first row is statically coded, and there is a button to add more rows to the form for batch submissions. JQuery applied to the .on(click) event works perfectly with the static content, but newly appended form rows ignore the binding. Even jsfiddle's dynamic display doesn't appear to function, though it is possible my fiddle example has a bug that my working copy doesn't have. (Fiddle)

/*    activeToggle is the selector for the container and descendants,
//    .toggleHappy is the hidden input element within activeToggle    */
$(activeToggle).on("click", ".toggleHappy", function(e) {
    e.preventDefault();
    $(this).val(($(this).val() == 0) ? 1 : 0);
    console.log($(this).val());
});

I have researched and found the common mistake of using .click() instead of delegating using .on(click, selector, fn()) and am thus using the latter now.

What is frustrating is I have another .on(click) that IS working with the dynamic content. (the remove function) So, I was hoping another pair of eyes might help me find out what my mistake is. I know this is very similar to other questions on the basic subject, but I have read quite a number of those discussions first, and have applied many of them to get where I currently am.

Updates:

1. I tried what Madhavan suggested and it does in fact work, but as expected, only for the first-child. So dynamically added rows are not pointed to. Thanks for the fast look. I feel like it might be a selector/scope issue, but whats weird is that once the page is loaded, I can type this directly into console and it works?

   //this works run from console, but doesn't fire from a real click?
   $(".theContainer .data .switch .toggleHappy").first().click();
   

2. ANSWER I have been working on another project in the interim and it is starting to look like .on(event, selector, fn) is not working at all for dynamically added items. But, I had a breakthrough! The other project was slightly simplified, and I found the following:

   //.theContainer is static
   //.data .switch .toggleHappy is the dynamic chain created
   
   //does not delegate and bind dynamically
   $(".theContainer").on("click", ".data .switch .toggleHappy", function() {});
   
   //DOES work!
   $(".theContainer").on("click", ".toggleHappy", function() {});
   

   It would appear that a selector like .path .to .element only works well on existing static content, while .element allows .on() to be bound and delegated properly for dynamically generated nodes. See the updated fiddle.

   The part that confused me was that hopping into the console and referencing dynamic elements with the full selector DID work on dynamic elements, but the events weren't delegated to them. Thanks again for the eyes that looked over this question, hope it helps someone else, because I still haven't found this on the web yet.

Answer 1

It appears that delegating jQuery events with .on() will only work on static content when the selector used within .on() is a list of consecutive elements. In my code, I had a single container which was static, I delegated an event to it referencing multiple elements between the container and the destination elements. It would work locally for any number of statically identified elements, but any dynamically added ones would ignore the bindings. It also would throw no errors, and it WOULD respond to lines of script executed within the console directly, using the same selector chaining as the function. I found the following:

//.theContainer is static
//.data .switch .toggleHappy is the dynamic chain created

//does not delegate and bind dynamically
$(".theContainer").on("click", ".data .switch .toggleHappy", function() {});

//DOES work!
$(".theContainer").on("click", ".toggleHappy", function() {});

It would appear that a selector like ".path .to .element" only works well on existing static content, while ".element" allows .on() to be bound and delegated properly for dynamically generated nodes. See the updated fiddle.

The part that confused me was that hopping into the console and referencing dynamic elements with the full selector DID work on dynamic elements, but the events weren't delegated to them. Thanks again for the eyes that looked over this question, hope it helps someone else, because I still haven't found this on the web yet.