jQuery click event not working on multiple screens

Question

I am using jQuery 1.4.2. Using the CSS selector "span.accordionOn", I am handling a click event. On screen one, it is working fine. Where as when I navigate to next screen, the functions are not getting called.

The jQuery handlers are as shown below. I am keeping them in a js file and loading the js file for every page load.

 $("span.accordionOn").click(function(event){
    $(this).parents(".toggleOuterCustom");
    $(this).parents(".toggleOuterCustom").find(".lHeight").toggleClass('lHeighttranslate');
    return false;
  });




// toggle link icon
  $('span.accordionOn').click(function(){
    $(this).toggleClass('accordionOff');
  });

Show the page load code? this is probably where your problem lies. — Liam
– Liam, Commented Nov 27, 2013 at 10:28

Praxis Ashelin · Accepted Answer · 2013-11-27 10:35:12Z

1

Without seeing more code it will be hard to find the exact issue, but here's a guess:

 $(document).on("click", "span.accordionOn", function(event){
    $(this).toggleClass('accordionOff'); //I merged the 2 functions
    $(this).parents(".toggleOuterCustom");
    $(this).parents(".toggleOuterCustom").find(".lHeight").toggleClass('lHeighttranslate');
    return false;
  });

Try the above code. If this works then the issue is as following:

You bind the event handler to all span.accordionOn elements that are currently in the document
However, if you add new span.accordionOn elements after this, the event will not be bound to them
The on event will work for all current and future span.accordionOn items that will ever be in the document, which solves this issue

answered Nov 27, 2013 at 10:35

Praxis Ashelin

5,2472 gold badges22 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ayniam · Accepted Answer · 2013-11-27 11:44:16Z

0

I found the issue. yes, you are right, elements do not exist when I am trying to bind.

However with jQuery 1.4.2, 'on()' doesn't exist and used 'live'. Here is the code.

  $("span.accordionOn").live('click',function(event){
    $(this).parents(".toggleOuterCustom");
    $(this).parents(".toggleOuterCustom").find(".lHeight").toggleClass('lHeighttranslate');
    return false;
  });

answered Nov 27, 2013 at 11:44

ayniam

6052 gold badges10 silver badges29 bronze badges

1 Comment

Praxis Ashelin Over a year ago

Is there perhaps a reason why you are using an outdated jQuery version? If not, I suggest upgrading to the newest stable version.

Collectives™ on Stack Overflow

jQuery click event not working on multiple screens

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related