onclick jquery not working after ajax call

Question

I am completely new to jQuery.

I have written an onclick event like this:

     $(document).ready(function () {
         $('body').find('.milestonetable').each(function () {
            var mTable = $(this);
            $(this).find('tr:first').children().eq(0).find('table').find('tr:last').children().eq(0).find('span').on('click', function () {
                var _mid = $(mTable).parent().next('table').find('tbody').find('tr').children().eq(1).find('input').val();
             //some other things to do.
            });

         });
    });

Its working fine. But when I call an ajax, it stops working. I have figured out that I have to write it something like this:

      $(document).on('click','.someclassName', function () {  

       });

But I am unable to convert the above code similar to the code below. Kindly help.

Note: I am using jQuery 1.10.4

Answer 1

Configuring the event in the following way might overcome your issue.

$(document).on("click",".class-added-to-your-span", function(){


});

More details on the live delegation can be found here > http://api.jquery.com/live/

Answer 2

You may replace your code to this code:

$('.milestonetable').on('click', '.class-added-to-your-span', function () {
    var mTable = $(this).closest('.milestonetable');


});

Note that I added a class to the span you are searching for: class-added-to-your-span

This way you attach the click event handler to the .milestonetable for your span, and get your code a bit simpler.