Fix for issue #17

js/hopscotch-0.1.1.js

@@ -815,8 +815,7 @@
 
         // Create callback to remove the callout. If a onCTA callback is
         // provided, call it from within this one.
-        callback = function() {
-          utils.removeEvtListener(self.ctaBtnEl, 'click', callback);
+        this._ctaFn = function() {
           if (!self.opt.isTourBubble) {
             // This is a callout. Close the callout when CTA is clicked.
             winHopscotch.getCalloutManager().removeCallout(step.id);
@@ -827,10 +826,19 @@
           }
         };
 
-        utils.addEvtListener(this.ctaBtnEl, 'click', callback);
+        utils.addEvtListener(this.ctaBtnEl, 'click', this._ctaFn);
       }
     },
 
+    /**
+     * Remove any previously attached CTA listener.
+     *
+     * @private
+     */
+    _removeCTACallback: function() {
+      utils.removeEvtListener(this.ctaBtnEl, 'click', this._ctaFn);
+    },
+
     /**
      * Renders the bubble according to the step JSON.
      *
@@ -1578,7 +1586,7 @@
           wasMultiPage,
           changeStepCb;
 
-      bubble.hide();
+      bubble.hide()._removeCTACallback();
 
       doCallbacks = utils.valOrDefault(doCallbacks, true);
       step = getCurrStep();

test/js/test.hopscotch.js

@@ -881,6 +881,75 @@ describe('HopscotchBubble', function() {
       $body.removeClass(testClassName);
     });
 
+    it('should invoke the CTA callback when the CTA button is clicked', function() {
+      var testClassName = "testingCTAButton",
+      tour = {
+        id: 'hopscotch-test-tour',
+        steps: [
+          {
+            target: 'shopping-list',
+            orientation: 'left',
+            title: 'Shopping List',
+            content: 'It\'s a shopping list',
+            showCTAButton: true,
+            ctaLabel: 'test',
+            onCTA: function() {
+              $body.addClass(testClassName);
+            }
+          }
+        ]
+      };
+
+      expect($body.hasClass(testClassName)).to.not.be.ok();
+      hopscotch.startTour(tour);
+      $('#hopscotch-cta').click();
+      expect($body.hasClass(testClassName)).to.be.ok();
+      hopscotch.endTour(tour);
+      $body.removeClass(testClassName);
+    });
+
+    it('should remove the CTA callback after advancing to the next step', function() {
+      var testClassName1 = "testingCTAButton1",
+      testClassName2 = "testingCTAButton2",
+      tour = {
+        id: 'hopscotch-test-tour',
+        steps: [
+          {
+            target: 'shopping-list',
+            orientation: 'left',
+            title: 'Shopping List',
+            content: 'It\'s a shopping list',
+            showCTAButton: true,
+            ctaLabel: 'test',
+            onCTA: function() {
+              $body.addClass(testClassName1);
+            }
+          },
+          {
+            target: 'shopping-list',
+            orientation: 'left',
+            title: 'Shopping List',
+            content: 'It\'s a shopping list',
+            showCTAButton: true,
+            ctaLabel: 'test',
+            onCTA: function() {
+              $body.addClass(testClassName2);
+            }
+          }
+        ]
+      };
+
+      expect($body.hasClass(testClassName1)).to.not.be.ok();
+      expect($body.hasClass(testClassName2)).to.not.be.ok();
+      hopscotch.startTour(tour);
+      hopscotch.nextStep();
+      $('#hopscotch-cta').click();
+      expect($body.hasClass(testClassName1)).to.not.be.ok();
+      expect($body.hasClass(testClassName2)).to.be.ok();
+      hopscotch.endTour(tour);
+      $body.removeClass(testClassName1).removeClass(testClassName2);
+    });
+
     it('should be able to invoke a callback that was registered as a helper', function() {
       var testClassName = 'testingOnNext',
           helperName = 'addClassToBody';