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.

have you check the object exists alert($("[id^=rdxCarterz]").length); and check number returned is not 0 — P6345uk, Jul 31 '14 at 12:02
Why not use delegation instead of adding a click handler after each call? — Barmar, Jul 31 '14 at 12:03
@Barmar Can you let me know how to use event delegation her with an example ? I am not aware of it. — The Dark Knight, Jul 31 '14 at 13:19
See http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Barmar, Jul 31 '14 at 13:20

score 0 · Answer 1 · answered Jul 31 '14 at 12:04

0

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

answered Jul 31 '14 at 12:04

sami

49
13

I have tried this way. It did not work.i cannot use $("body"),because i m including the same jsp at some other places in the application where ther e is no ajax call.it is affecting that palces also – The Dark Knight Jul 31 '14 at 13:19

Click event is not working after ajax call

1 Answers1