Link to home
Start Free TrialLog in
Avatar of Camillia
CamilliaFlag for United States of America

asked on

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?
Avatar of ste5an
ste5an
Flag of Germany image

hmm, 800+ lines of HTML for this??

User generated image
Sure that you're working with the correct selectors? Maybe you should craft a concise example to eliminate that the HTML is the problem..
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
Avatar of Camillia

ASKER

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!
ASKER CERTIFIED SOLUTION
Avatar of Juana Villa
Juana Villa
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thanks, let me see. I'll clean up mt example as well. Ste5an is right...cleaner example.
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?anchorAnswerId=42614605#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
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.
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.