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?