CODEWITHSUNDEEP
jquerywordpresstriggers
acrobat
acrobat

Reputation: 57

jquery trigger click event one at a time

I have an a simple quiz app which I'd like to add a functionality to automatically bring the next question.

As of now after people select an answer they have to click 'Next' to see the next question. I'd like to trigger a click event on the Next button when an answer is selected.

Keep in mind all the questions are loaded and are hard coded into the html but styled to display:none; so when we're clicking next essentially what is happening is we're setting the next one to be visible and the current one invisible.

Here's what I've tried with half solution.

The problem with my code is that it triggers click on the last next button when it should do it to the button in the same parent. 

$ = jQuery;
$(document).ready(function(){
    $("li.wpProQuiz_questionListItem").click(function() {

        $(this).parent("li").closest('.next').trigger('click');     
        return false;
    });
});

</script>

Here's my code structure.

<ol>
<li>
 <div>
  <ul>
   <h2>q1</h2>
    <li>answer 1</li>
    <li>answer 2</li>
    <li>answer 3</li>
     <button class="next">
   </ul>
  </div></ul>
<li style="display:none;">
 <div>
  <ul>
   <h2>q2</h2>
    <li>answer 1</li>
    <li>answer 2</li>
    <li>answer 3</li>
     <button class="next">
   </ul>
  </div></li>
<li style="display:none;">
     <div>
      <ul>
       <h2>q3</h2>
        <li>answer 1</li>
        <li>answer 2</li>
        <li>answer 3</li>
         <button class="next">
       </ul>
      </div></li>
    </ol>

Thank you. Ps it may seem solved when

Upvotes: 0

Views: 367

Answers (1)

negative0
negative0

Reputation: 459

I wonder why you're trying to pass in the "click" event, just on document ready check for any element been checked and the .fadeIn() the next li child.

$(document).ready(function() {
if($('input[type=checkbox]:checked')) {
    $('li:first-child').next().fadeIn('slow');
}});

Upvotes: 1

Related Questions