Animation does not work on 2nd ajax call

Question

I have a main page and subpage which is displayed via ajax call. When I click on the menu and load a subpage I have this animation inside which works well:

$(document).ready(function(){
  $(".transactions").on("click", function (something) {
    something.preventDefault();
    $(".alltransactions").hide().show();
  });

  $(".alltransactions").on("click", function (something2) {
    something2.preventDefault();
    $(".alltransactions").hide();
  });
});

But when I go back to the main page and the load subpage via ajax again the above animation does not work anymore. I have to refresh the whole page to get it working again. Where is the problem?

Answer 1

If you dont wish to wrap the click event inside a function means you can just trigger those two events just by calling this on your success function..

Jquery:

     $.ajax({
        url: '',
        data: ,
        success: function (response) {
           $(".transactions").click();
           $(".alltransactions").click();
        },
        error: function () {

        }
    });