Product Card Effect?

JavaScript
1

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.then(function(data){
			form = data;
		});

		//replace content with form
		App.originalContent = parent.html();
		parent.fadeOut('fast', function () {
			$(this).html(form);
                         // this doesn't work as expected...
			App.cacheFormElements($(form));
			App.bindFormEvents();
		}).fadeIn('fast');
	},

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) {
			e.preventDefault();
			alert('cancel clicked');
                         // restore original content
		});
		this.$submitBtn.on('click',function(e){
                        e.preventDefault();
			alert('submitclicked');
                         // 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?

2

Hi,

So if you add this line directly to the top of bindFormEvents what does it output?

console.log(this.$cancelBtn, this.$cancelBtn[0]);