SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Product Card Effect?

    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:
    Code:
    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:
    Code:
            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. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi,

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

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


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •