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,313
    Mentioned
    178 Post(s)
    Tagged
    9 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
  •