Camillia
asked on
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
The divs looked like this
2. I made a change to the HTML to get the rows correctly. Instead of ".after", I used ".append"
Now it looked correctly
3. I had the code in the accepted solution above but the divs weren't hiding/displaying
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
If use #schedgroup instead of 'body'...code below works because #schedgroup is static
You can see it here
Works http://jsfiddle.net/jv2oudhg/
Doesn't work with my HTML change http://jsfiddle.net/gm5uxh7q/
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>');
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>')
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");
});
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() {
You can see it here
Works http://jsfiddle.net/jv2oudhg/
Doesn't work with my HTML change http://jsfiddle.net/gm5uxh7q/
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks, as always, for the help.