toggleClass not working

Question

I'm having problem with 'toggleClass'. What this script do is it adds a new set of field depending on the radio buttons value. Inside the field is a new div that is hidden by default and will be displayed only if the 'a' is triggered by a click event. At first it works but once I click on another radio button or at the same radio button the 'toggleClass' dont work anymore.

here is the code:

$(document).ready(function(){

      $('.duplicatorRadio').click(function() {
          var this_index_limit = parseInt($(this).val());
          for(var i = 0; i < this_index_limit; i++) {
             if(!$('#text_box_' + i).length) {
                var headerValue = parseInt(i) + 1;
                $(
                  '<fieldset id="text_box_' + i + '"> <h3>Property ' + headerValue +' Information</h3> <a class="borrowerToggler" href="#">Show Co-Borrower</a> <div class="borrower hide"> <h5>Co-Borrower Information</h5></div></fieldset>'
                  ).appendTo($(this).parent());
             }
             else if($('#text_box_' + i).css('display') == 'none') {
                $('#text_box_' + i).show();
             }
          }

          $('fieldset').each(function() {
             var split_id = $(this).attr('id').split('_');
             if(!split_id.length) return;
             var index = parseInt(split_id[2]);
             if(index >= this_index_limit) {
                 $(this).hide();
             }
          });

          $("a.borrowerToggler").click(function(){
            $(this).next("div").toggleClass("hide");
          });

      });

  });

Answer 1

Try by using .live() method to bind click event. This demo might hlp you.