CODEWITHSUNDEEP
jquery
MattClaff
MattClaff

Reputation: 685

Function wont repeat

jQuery(document).ready(function($) {
  function passive(){
    $('.div_level_1_active').
      removeClass('div_level_1_active').
      addClass('div_level_1_passive');

    $(this).
      removeClass('div_level_1_passive').
      addClass('div_level_1_active');
  }

  $('.div_level_1_passive').on("click", passive);
});

The code above shows a simple button click which will open a box. The error is that once I use this event I cant use it again. I have used functions so that the method can be used more than once but it wont work.

Update from comment:

"I fixed it with this. Thank you for your time I am unless at getting my point across. ":

jQuery(document).ready(function ($) {
    function passive(thisObject) {
        $('.div_level_1_active').removeClass('div_level_1_active').addClass('div_leve‌​l_1_passive');
        $(thisObject).removeClass('div_level_1_passive').addClass('div_level_1_active');
    }
    function active(thisObject) {
        $(thisObject).removeClass('div_level_1_active').addClass('div_level_1_passive');
    }
    $('.div_level_1_passive').click(function () {
        passive(this);
    });
    $('.div_level_1_active').click(function () {
        active(this);
    });
});

Upvotes: 0

Views: 67

Answers (2)

Paul Roub
Paul Roub

Reputation: 36438

Your on() will only apply to .div_level_1_passive elements that existed at the time it was called. You want to handle those that appear later (as in your click handler):

$(document).on("click", '.div_level_1_passive', passive);

Example: http://codepen.io/paulroub/pen/kemay

Upvotes: 3

BeNdErR
BeNdErR

Reputation: 17929

use 

  $(document).on("click", ".div_level_1_passive", passive);

to bind the click event. this will apply to all the elements with the div_level1_passive class, even if added after you bound the click event

Upvotes: 1

Related Questions