jQuery click event doesn't get called

I am following an example http://jsfiddle.net/glebkema/73gtkvjt/  to have have divs collapse and expand.

But I create controls dynamically so the JS code in that JSFiddle wasn't working... the divs weren't being collapsed.

I found this link that explained why dynamic controls work differently Explanation

I created this JSfiddle (forked the one above)

http://jsfiddle.net/3zw18rxe/7/

What I tried:
      
$('.toggle').on("click", ".schedule", function() {

Open in new window


Tried this but the divs won't collapse correctly...all of them will collapse

$(document).on("click",".toggle",function(){
    // code goes here
});

Open in new window


As a test, I hardcoded the id, but this didn't work either

$('.toggle').on("click", "#Schedules[0].Type", function() {

Open in new window


How can I do this when the controls are created dynamically?
LVL 8
CamilliaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ste5anSenior DeveloperCommented:
hmm, 800+ lines of HTML for this??

Capture.PNG
Sure that you're working with the correct selectors? Maybe you should craft a concise example to eliminate that the HTML is the problem..
0
Leonidas DosasCommented:
Check this:
$('.row').on("click",  function() {

	  console.log("on toggle")

	  if (!$(this).next().hasClass('in')) {

	    $(this).parent().children('.collapse.in').collapse('hide');
	  }
	  $(this).next().collapse('toggle');
	});

Open in new window


JSfiddle demo
0
CamilliaAuthor Commented:
hmm, 800+ lines of HTML for this??

I copied and pasted what HTML generated. There are other hidden controls with "hidden" class. I'm looking to redo this code using React.js components (another thread I have with Julian). It's not HTML because I have other examples I've been working with today.


The other solution works if I click on the second row. When I click on the first row, both rows collapse. How could this be so hard!
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Juana VillaFront-end DeveloperCommented:
Hi,
I think that you can solve this problem by changing the html. Each row needs to have its own wrapper in order for the js to know what "this" means. If they have the same wrapper that means they'll have the same parent (same "this"), which means that the js will collapse both elements.

I made this example in order for my words to make more sense lol
http://jsfiddle.net/y6ufcjwq/15/

I hope this helps!
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
CamilliaAuthor Commented:
Thanks, let me see. I'll clean up mt example as well. Ste5an is right...cleaner example.
1
Julian HansenCommented:
There are three things here
1. This relates to your other question (https://www.experts-exchange.com/questions/29107740/jQuery-code-partly-works-hide-div.html#a42614605) you need a selector that is static

2. Your markup has the second div as a child of the first - not sure if that was intentional.

3. Your selector uses .schedule with a parent of .toggle - which does not make sense - it appears you want to click on the toggle to toggle the schedule but your code above is setting the handler on the schedule

This is closer to what you want (I think)
	  $('body').on("click", ".toggle", function() {

Open in new window

BUT (as Ste5an pointed out) the weird markup is probably getting in the way
0
CamilliaAuthor Commented:
Thanks, Julian. #1 related question worked. This question is for another section but I understand what you mean.

Let me clean up the code per Ste5an's suggestion and try this again.

I think I tried your line of code as well but I'll clean up the example. I looked at Villa's example and will try that as well.
0
CamilliaAuthor Commented:
Juana's solution worked but I had to make a change to the markup and the way the ex-developer had built this page.

I have one more issue but I'll see if I can figure it out.

Thanks for the help.
1
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.