javascript - 在 .remove() 和 .append() 之后返回按钮上的事件

Question

我在复选框按钮上有一个单击事件，我在单击事件中删除了该事件，然后再次附加了另一个值。我的问题是点击事件在新追加后不再起作用。

<input class="year" type="checkbox" value="2015" /> 2015 <br>

$(".year").click(function(){
    $(".col-md-12").remove(); //i remove the div which contains the checkbox 

    $.ajax({
        url: "criteria_search",          
        type: 'POST', 
        data: {
            criteria: "authors", 
            value: "test" 
        },
        success: function(data) { 
            articles = $.parseJSON(data)
            $("#AppendToElem").append(" <div class=\"col-md-12\"> <h2> Search Results <\/h2> <p> <span>There are<\/span> <strong>3974<\/strong> <span>results for:<\/span> <strong>Computer Animation and Virtual Worlds<\/strong> <\/p> <p> <a class=\"btn\" href=\"#\"><\/a> <\/p> <div class=\"row\"> <div class=\"col-md-3\"> <h3> Filter List <\/h3> <div class=\"form-group\"> <label for=\"exampleInputEmail1\"> Year <\/label><br>");   
            $.each(articles, function(index, jsonObject){
                $("#AppendToElem").append("<input class=\"year\" type=\"checkbox\" value=" + jsonObject.date.date.substring(0, 4) + " /> " + jsonObject.date.date.substring(0, 4) + "<br>") 
            });
        )
    });
});

当我第二次单击复选框后，单击事件未得到处理。我该如何解决这个问题？

Answer 1

改用on。即使您将 checkbox 附加回来，它也应该可以工作:

$(document).on("click",".year",function(){

 $(".col-md-12").remove();//i remove the div which contains the checkbox 
 ..other code...

});