Run jquery plugin with javascript onclick method

Question

I am using a Jquery plugin for my checkboxes the page of the plugin is this: http://fronteed.com/iCheck/#skin-line

The thing is I used a Javascript function for adding new checkboxes:

function add(){

        var userInput = document.getElementById('reg').value;
        document.getElementById('checklist').innerHTML = document.getElementById('checklist').innerHTML +
        "<li> <input type='checkbox'> <label>"+ userInput + "</label> </li>";
    }

    $(document).ready(function(){
      $(' input').iCheck({
        checkboxClass: 'icheckbox_polaris',
        radioClass: 'iradio_polaris',
        increaseArea: '-10%' // optional
      });
    });

my HTML where I'm executing the function looks like this:

<p><input type="button" onclick="add()" class="bttns" value="Add"/></p>

  </div>
  <h3>Added:</h3>
</div>
<div class="scrollpersonalizado">
       <ul class="listacheck-radio" id="checklist">

          </ul>
  </div>  

the problem is if I have checkboxes within the:

<ul class="listacheck-radio" id="checklist">

</ul>

when the page loads, they have the style of the plugin, but whenever I click the button and add a new checkbox, this one doesn't get the style of the plugin, and the ones that were there before stop working.

Can anybody please help?

Thanks in advance!

Answer 1

You will need to do two things:

1. Stop resetting the entire .innerHTML because that wipes out all objects in that sub-hierarchy and creates all new ones (losing all event handlers and styling).

2. Dynamically create your new elements and use on of the .append() methods and then call .iCheck() on them after creating in order to inherit the new functionality.

Code to do both of those using jQuery:

function add() {
    var userInput = $("#reg").val();
    $("<li> <input type='checkbox'> <label>"+ userInput + "</label> </li>")
        .appendTo("#checklist")
        .find("input")
        .iCheck({
            checkboxClass: 'icheckbox_polaris',
            radioClass: 'iradio_polaris',
            increaseArea: '-10%' // optional
         });
}

Conceptually, this is what this code does:

1. Get the reg value.
2. Create a new HTML fragment using the reg value
3. Append that to the end of the existing checklist
4. Find the new input tag in that new HTML fragment
5. Call .iCheck() on it to bless it with the desired behaviors/styles like the other ones.

Answer 2

try this:

$(document).ready(function(){
  $('.scrollpersonalizado').on('click', 'input', function(){
       var userInput = document.getElementById('reg').value;
       $('#checklist').append("<li> <input type='checkbox'> <label>"+ userInput + "</label> </li>");
  }).iCheck({
    checkboxClass: 'icheckbox_polaris',
    radioClass: 'iradio_polaris',
    increaseArea: '-10%' // optional
  });
});

---

remove the inline onclick handler from the button try unobtrusive this way with event delegation as you have created your inputs dynamically.