Jquery-Klassen werden nicht auf Klick-Ereignis entfernt

Question

Hallo Im Erstellen eines Jquery-Plugin die Ausgabe ähnelt einer Erinnerung app jetzt ist mein Problem, wenn ich alle markieren die Klassen platziert werden, die korrekt ist, aber sobald ich es versuche um die Aufgaben zu entfernen, die ich markiert habe nur das 1. Element hat seine Klassen keine Idee entfernt? hier ist meine jQuery-Code

//iterator for General Matters's todo 
$.fn.iteratethis = function() { 
    this.find("li").each(function(index) { 
     var roots = $(this); 
     console.log(index + ": " + $(this).text()); 
     $(this).find(".tsk").on("click", function() { 
      $(roots).not(document.getElementById("not-data")).addClass("strikeit hide"); 
      if ($(roots).hasClass('tmpReveal')) { 
       $(roots).removeClass('tmpReveal strikeit hide'); 
      } 
     }); 
    }); 
    return this; 
} 

//Shows finished Todo 
$.fn.showme = function() { 
    this.on("click", function() { 
     if ($(this).is(':checked')) { 
      $('#task_list').find("li.hide").removeClass('hide').addClass('tmpReveal'); 
     } else { 
      $('#task_list').find("li.tmpReveal").removeClass('tmpReveal').addClass('hide'); 
     } 
    }); 
    return this; 
} 
$('#GeneralMattersLink').on("click", function() { 
    $('#GeneralMatters').siblings().hide(); 
    $('#GeneralMatters').toggle("fast", function() { 
     $(this).removeClass("hide"); 
     //Modal for the New TODO 
     $('#new_task').on("click", function() { 
       $('#add_new_task').modal('show'); 
      }) 
      //Save button for the todo 
     $('#addnewtodo').on("click", function() { 
      var ai = $('#task_list').children("li").length; 
      $('ul#task_list').prepend("<li class='list-group-item'><div class='tbl-r'> \n\n\ 
<div class='tbl-c'><div class='checkbox_round'><input type='checkbox' \n\n\ 
name='check[]' id=" + ai + " class='tsk' value=''/><label for=" + ai + "></label></div></div><div \n\n\ 
class='tbl-c'><p>" + $("#new_todo").val() + "</p></div></div></li>"); 

      $('#new_todo').val(""); 
      $(this).modal('hide'); 
      $('ul#task_list').iteratethis(); 
     }); 

     $('ul#task_list').iteratethis(); 
     $('#sfsh').showme(); 


    }); 
}); 

MY HTML

<div class="panel panel-default"> 
          <!-- Default panel contents --> 
          <div class="panel-heading bold">General Matters <span id="new_task" class="glyphicon glyphicon-plus pull-right" aria-hidden="true"></span></div> 
          <!-- List group --> 
          <ul id="task_list" class="list-group todopanel"> 
    </ul> 
    </div> 

Die modalen

 <div class="modal fade" id="add_new_task" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
        <h4 class="modal-title" id="myModalLabel">New Todo</h4> 
       </div> 
       <div class="modal-body"> 
        <!--form --> 
        <form id='winebeerForm' class="form-horizontal"> 
         <!-- Text input--> 
         <input type="text" name="new_todo" id="new_todo" class="form-control" placeholder="New Todo" /> 
        </form> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        <button type="button" id="addnewtodo" class="btn btn-primary" data-dismiss="modal" >Save</button> 
        <!--/ from --> 
       </div> 
      </div> 
     </div> 
    </div> 

alles andere funktioniert mit Ausnahme des Entfernen des Häkchens Teil einer Aufgabe

Answer 1

ersten von allem was ich wollte ld möchte mich bei freedomn-m für die tipps bedanken, die er/sie mir gegeben hat, wie ich mein problem lösen könnte und das ist, wie ich es gemacht habe .. obwohl ich nicht sicher bin, ob dies der effizienteste weg ist

nachdem ich es gemacht habe mit 1 Funktion der Name der Funktion, die ich bearbeitet war wie dieser iteratethis

der neue Code wurde

 $.fn.iteratethis = function() { 
       this.find("li").not(document.getElementById("not-data")).each(function (index) { 
        index++; 
        console.log(index + ": " + $(this).text()); 
        $("#" + index).on("click", function() { 
        //newcode added 
        if (!($(this).is(":checked"))) { 
          $(this).parent().closest('li').removeClass("strikeit tmpReveal hide"); 
         } else { 
          $(this).parent().closest('li').addClass("strikeit hide"); 
         } 
        }); 

       }); 
       return this; 
      } 

ich eine Hinzugefügt if-Anweisung, die derzeit einen nach dem anderen habe ich es geschafft, damit es funktioniert, wenn diese bestimmte Checkbox überprüft ist checked dann innerhalb der Checkbox Ich hatte es nach dem Eltern suchen dann entfernen Sie die Klasse, die ich entfernen möchte

und das ist es