Click event is not working after ajax call

Question

I have a parent jsp in which another jsp will be included. In the child jsp another jsp is included.

There will be a button in first child jsp, if we click that button ajax call will be triggered and this will append the div of second child jsp.

Problem here is:: In the appended second child jsp, Javascript is not working.

function abc(){
    $("[id^=<%=KunalBean.getBeanFieldPrefix()%>rdxCarterz]").on("click", function() {
    alert("after ajax call")
});
}

I am calling this abc function on success call of ajax. After ajax call, the function abc( ) is getting called, but the click event is not working. So when I click on the corresponding radio option, it does not work.

Please let me know what can be the solution for this problem.

Answer 1

When trying to call event from a dynamically loaded object use this method

function abc(){
    $("body").on("click" , "[id^<%=KunalBean.getBeanFieldPrefix()%>rdxCarterz]",function({
     alert("after ajax call");
  });
}