Hi guys, so i'm trying to make a little application where a user views a card that has product information in it, then when they want to buy they click the buy button and a form fades in and they can fill it out. I have it working to where the content fades out and the new ones come in, but the buttons to cancel (and show the previous content) and submit aren't working.
First i bind the events and when the buy button is clicked, load out the content and load in the form:
bindEvents: function(){
		this.$buttons.on('click', this.openForm);
openForm: function(){
		//save original content
		var parent = $(this).parent().parent(),
		form = App.getForm(parent);
			form = data;

		//replace content with form
		App.originalContent = parent.html();
		parent.fadeOut('fast', function () {
                         // this doesn't work as expected...
Then I bind the new elements in the form:
        cacheFormElements: function (context) {
		this.$submitBtn = context.find('input[type="submit"]');
		this.$cancelBtn = context.find('#cancelBtn');

	bindFormEvents: function () {
		this.$cancelBtn.on('click', function (e) {
			alert('cancel clicked');
                         // restore original content
                         // submit form
But the binding doesn't work as expected. It's like the bindFormEvents are totally ignored when i click, but if i do a console.log(), those elements are cached.
Could someone please guide me in the right direction?