1

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?

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
azelix
  • 1,257
  • 4
  • 26
  • 50
  • You have a syntax error; the `success` handler should be closed with a `}`, not a `)` – Rory McCrossan Oct 14 '15 at 08:34
  • It's just a bad copy past from my code. it's working fine i have no syntax error . the first time it's working fine and the event is handled and the checkbox is created again with the correct value the next time i click on the new appended checkbox the click event is nto working anymore but i 'll edit the post thank you for noticing that – azelix Oct 14 '15 at 08:36

1 Answers1

1

Use on instead. It should work even after you append the checkbox back:

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

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

});
Sandeep Nayak
  • 4,649
  • 1
  • 22
  • 33