Why is this jQuery code working? (dynamic control)

This is related to this question https://www.experts-exchange.com/questions/29108573/jQuery-click-event-doesn't-get-called.html

I'll go step by step.

1. The solution in that thread worked. I tested it by hardcoding some rows and it worked. Then, I plugged it in my actual code and that worked except that I needed to fix the position of the rows.

I had this code to add the row dynamically

 

var schedule = $('.schedule:last', '#scheduleArea'); 
            var newSchedule = $(schedule).clone(true, false).html();

            // Change the 'Id' of all the elements
          //... some code here

            // Append the new schedule and hide it
	$(schedule).after('<div class="row"> <div class="toggle"> <div class="col-xs-4" style="background-color:rebeccapurple">left</div> </div><div id=Schedules[' + scheduleCurrentIndex + '].Type class="schedule hidden">' + newSchedule + '</div></div>'); 
 

Select allOpen in new window

The divs looked like this

2. I made a change to the HTML to get the rows correctly. Instead of ".after", I used ".append"

	var schedule = $('.schedule:last', '#scheduleArea'); 
            var newSchedule = $(schedule).clone(true, false).html();

            // Change the 'Id' of all the elements
      //... some code here

			//console.log($(schedule));

            // Append the new schedule and hide it
			//$(schedule).after('<div class="row"> <div class="toggle"> <div class="col-xs-4" style="background-color:rebeccapurple">left</div> </div><div id=Schedules[' + scheduleCurrentIndex + '].Type class="schedule hidden">' + newSchedule + '</div></div>'); //camilla added collapse in per stackoverflow
		    
			
$("#schedgroup").append('<div class="row"> <div class="toggle"> <div class="col-xs-4" style="background-color:rebeccapurple">left</div> </div><div id=Schedules[' + scheduleCurrentIndex + '].Type class="schedule hidden">' + newSchedule + '</div></div>')

Select allOpen in new window

Now it looked correctly

3. I had the code in the accepted solution above but the divs weren't hiding/displaying

$('.row').on("click", ".toggle", function() {
console.log($(this).parents().children('.schedule'));
    $(this).parents().children('.frequency').toggleClass("hide");
	});

Select allOpen in new window

I saw this in console when I was clicking on the div. "click" event looked like being called twice


4. I went to Julian's solution and that worked. Why is that? Julian has an explanation here but maybe that's what I don't understand
Julian's explanation

I think this is the key

To get around this we need to bind to a parent element that will be static -

If use #schedgroup instead of 'body'...code below works because #schedgroup is static

$('body').on("click", ".toggle", function() {

Select allOpen in new window

You can see it here

Works http://jsfiddle.net/jv2oudhg/

Doesn't work with my HTML change http://jsfiddle.net/gm5uxh7q/