0

In the head of my script, I define a click function for the class ActiveQuestionCycler, which cycles through a series a panels. (Full code for this function at the bottom of this post.) When I assign that class to a div element (e.g. <div class="ActiveQuestionCycler"></div>), the function works, so there are no errors in this code.

In addition, I can successfully use the following code to add the class activequestioncycler to a new div element (<div class="NewDiv"></div>) so that it, too, runs the activequestioncycler function when I click on it. 

<script type='text/javascript'> 
$(document).ready(function(){
    $(".NewDiv").addClass("ActiveQuestionCycler");
});
</script>

However, I am having trouble adding the class to one div element (e.g. <div class="DivToClick"></div>) when another (e.g. <div class="DivToAdoptClass"></div>) is clicked.

Here's the code that isn't working:

<script type='text/javascript'> 
$(document).ready(function(){
  $(".DivToClick").click(function () {
    $(".DivToAdoptClass").addClass("ActiveQuestionCycler");
});
</script>

If I click DivToClick it should add the ActiveQuestionCycler class to DivToAdoptClass so that, if I subsequently click DivToAdoptClass, it will run the function and show the panels. However, nothing happens.

If I use something other than addClass, the function above works fine. For example, the following function successfully hides DivToAdoptClass when I click DivToClick

<script type='text/javascript'> 
$(document).ready(function(){
  $(".DivToClick").click(function () {
    $(".DivToAdoptClass").hide();
});
</script>

If someone could help explain why addClass doesn't work when it runs within a click function, I would appreciate it.

Thanks!

JUST IN CASE: CODE THAT DEFINES CLICK FUNCTION FOR ACTIVEQUESTIONCYCLER CLASS

<script type="text/javascript">
$(document).ready(function () {
    var controlPanel = [] 
var questiontype= '<?php echo $data['QuestionType']; ?>'
         var panels=$("."+questiontype+"Question."+questionlevel+".active").length;     

    $(".ActiveQuestionCycler").click(function () {
      var rand = Math.floor(Math.random()*panels);
      if (controlPanel.length >= $("."+questiontype+"Question."+questionlevel+".active").length) { 
        controlPanel.length = 0 
      }
      while (controlPanel.indexOf(rand) !== -1){ 
        rand = Math.floor(Math.random()*panels);
      }
      controlPanel.push(rand) 
        for(i=1;i<=panels;i++){
if($("."+questiontype+"Question."+questionlevel+".active").is(":visible")){
                $("."+questiontype+"Question."+questionlevel+".active").hide();
            }
        }   
        setTimeout(function(){
 $("."+questiontype+"Question."+questionlevel+".active").eq(rand).show();
    });   
});
</script>
Snoops
  • 215
  • 1
  • 12
  • @adeneo I read through the post that this is supposedly a duplicate of and I don't understand how I would apply that to this particular case. Any help would be much appreciated. Also, why would this work for `hide` and not for `addClass` – Snoops Aug 17 '17 at 01:15
  • I've been playing around with this more and it seems as though the issue lies in the code that defines what happens when an element with class `ActiveQuestionCycler` is clicked. It fails to recognize that there's a new element with that class. – Snoops Aug 17 '17 at 01:31
  • When you bind an event handler it's bound to all matching elements at that time. When you add a class a later, the previously bound event handler won't work for that element. This seems to be the issue here, and you'll need delegated event handlers -> https://jsfiddle.net/x3pk4ek2/ – adeneo Aug 17 '17 at 09:59

0 Answers0