Get back my event on button after .remove() and .append() [duplicate]

This question already has an answer here:

I have a click event on a checkbox button which I remove in my click event and I append it again with another value. My problem is the click event is not working anymore after the new append.

<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>") 
            });
        )
    });
});

And after I clicked on my checkbox the second time the click event is not handled. How can I fix this?


Source: jquery

Leave a Reply