jquery function not working after jquery version update

Question

OK so I have this function that worked fine using jquery 1.8.3, but it no longer works when I use jquery 1.10.x or above.

<script type="text/javascript">
    $.ajaxSetup({cache: false});
    $(document).ready(function() {
        // set up the click event
        $('a.groups_loader').on('click', function() {
            var toLoad = '<? echo base_url(); ?>user/account_groups/';
            $('.groupsajax').fadeOut(100, loadContent);
            $('#load').remove();
            $('#groupswaiting').append('<div id="load" style="height: 400px;"><div id="loader-arm"><div id="loader-lp"><div id="loader-baLabel"></div></div><div id="loader-reflect"></div></div></div>');
            $('#load').fadeOut(1000);
            function loadContent() {
                $('.groupsajax').load(toLoad, '', function(response, status, xhr) {
                    if (status == 'error') {
                        var msg = "Sorry but there was an error: ";
                        $(".groupsajax").html(msg + xhr.status + " " + xhr.statusText);
                    }
                }).fadeIn(4000, hideLoader());
            }
            function hideLoader() {
                $('#load').fadeOut(2000);
            }
            return false;
        });
    });
</script>

I would like to know what's changed and how I can fix this. Thanks

Answer 1

In case it helps others... the problem was not in the above script, but was in another similar (ajax) script on the page. In the above script I had updated .live('click', function() to .on('click', function() as .live has been deprecated in later versions of JQ. However, another script on the page had not been updated and still used .live, and that was preventing the above script from working. So rather than trying to trouble shoot one script at a time, make sure you update them all first!