CODEWITHSUNDEEP
javascriptjqueryhtml
Raihan
Raihan

Reputation: 4001

jQuery icheck plugin not working after being append

I have ADD button and when I click it append the following:

<div class="checkbox">
    <label>
       <input type="checkbox"> Sample
    </label>
 </div>

to another div (class name .new-option-content). FIDDLE

I am using jquery icheck plugin to stylize the check boxes. But when I append I don't see icheck styling on the check boxes. why this can happen ? I call the function properly but why it's not showing it's styling after append ?

Any help will be appreciated.Thanks

jQuery 

// Radio and Checkboxes

 $('input').iCheck({
    checkboxClass: 'checkbox-default',
    radioClass: 'radio-default'
  }); 


$('body').on('click', '.add-new-option', function() { 
        $('.new-option-content').append('<div class="checkbox"> <label> <input type="checkbox"> Sample </label> </div>');

});

Upvotes: 0

Views: 4066

Answers (4)

R B
R B

Reputation: 658

$('body').on('click', '.add-new-option', function() { 
    $('.new-option-content').append('<div class="checkbox"><label><input type="checkbox"> Sample </label></div>');
    $('input').iCheck({
            checkboxClass: 'icheckbox_square-blue',
            radioClass: 'iradio_square-red',
            increaseArea: '20%' 
    });
});

Try this one its work fine.

Upvotes: 0

Mohamed Sadok Krichen
Mohamed Sadok Krichen

Reputation: 11

when you append some plugins always try to reintializate the plugins in your JS code, otherwize it will never work.

Upvotes: -1

Razvan Dumitru
Razvan Dumitru

Reputation: 12452

Just run the check function again for current checkbox. The problem is that you append the checkboxes dynamically.

Js: 

  // Radio and Checkboxes
 $('input').iCheck({
    checkboxClass: 'checkbox-default',
    radioClass: 'radio-default'
  }); 


    $('body').on('click', '.add-new-option', function() { 
            $('.new-option-content').append('<div class="checkbox"> <label> <input type="checkbox"> Sample </label> </div>');
        var $lastCheckBox = $('.new-option-content').find('input').last();  
        console.log($lastCheckBox);
          $lastCheckBox.iCheck({
        checkboxClass: 'checkbox-default',
        radioClass: 'radio-default'
      }); 

    });

Js fiddle : http://jsfiddle.net/8w83nue3/

Upvotes: 1

tmarwen
tmarwen

Reputation: 16364

You have to execute the isCheck function again once you append a new item dynamically. This instruction should be part of the click handler method:

$('body').on('click', '.add-new-option', function() { 
  $('.new-option-content').append('<div class="checkbox"> <label> <input type="checkbox"> Sample </label> </div>');
  $('input').iCheck({
    checkboxClass: 'checkbox-default',
    radioClass: 'radio-default'
  });
});

Here is you JSFiddle updated.

Upvotes: 2

Related Questions