jquery not working with ajax

Question

i am trying to make a message inbox which is being included on ajax call on main page but on call of ajax for that inbox page it is loaded but jquery click event is not working.........

<table> 
    <tr id="a"><td>aaaaaaaaaaaaa</td></tr>    
    <tr id="b"><td>showwwwwwwwwwwwwww</td></tr>
</table>

jQuery:

$("#a").on("click", function() {
    $("#b").slideToggle();
});

But the same inbox page working properly when loading it separately i mean without using ajax. please help!

Answer 1

I assume the elements with id a and b are loaded dynamically to the page using an ajax request, in that case you need to use delegation based event handling as shown below

$(document).on("click", "#a", function() {
    $("#b").slideToggle();
});