namespace the events for popover/tooltip so that they can be cleanly …

…removed. issue twbs#3880
lookfirst · Jul 16, 2012 · 2ee9b27 · 2ee9b27
1 parent 40ab928
commit 2ee9b27
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 8 deletions.
diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
@@ -754,6 +754,12 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
               <p>{{_i}}Object structure is: <code>delay: { show: 500, hide: 100 }</code>{{/i}}</p>
              </td>
            </tr>
+           <tr>
+             <td>{{_i}}ns{{/i}}</td>
+             <td>{{_i}}string{{/i}}</td>
+             <td>'.tooltip'</td>
+             <td>{{_i}}jQuery event namespace{{/i}}</td>
+           </tr>
           </tbody>
         </table>
         <div class="alert alert-info">
@@ -912,6 +918,12 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
               <p>{{_i}}Object structure is: <code>delay: { show: 500, hide: 100 }</code>{{/i}}</p>
              </td>
            </tr>
+           <tr>
+             <td>{{_i}}ns{{/i}}</td>
+             <td>{{_i}}string{{/i}}</td>
+             <td>'.popover'</td>
+             <td>{{_i}}jQuery event namespace{{/i}}</td>
+           </tr>
           </tbody>
         </table>
         <div class="alert alert-info">

diff --git a/js/bootstrap-popover.js b/js/bootstrap-popover.js
@@ -72,7 +72,7 @@
     }
 
   , destroy: function () {
-      this.$element.off().removeData('popover')
+      this.$element.off(this.options.ns).removeData('popover')
     }
 
   })
@@ -97,6 +97,7 @@
     placement: 'right'
   , content: ''
   , template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
+  , ns: '.popover'
   })
 
 }(window.jQuery);
diff --git a/js/bootstrap-tooltip.js b/js/bootstrap-tooltip.js
@@ -47,8 +47,8 @@
       if (this.options.trigger != 'manual') {
         eventIn  = this.options.trigger == 'hover' ? 'mouseenter' : 'focus'
         eventOut = this.options.trigger == 'hover' ? 'mouseleave' : 'blur'
-        this.$element.on(eventIn, this.options.selector, $.proxy(this.enter, this))
-        this.$element.on(eventOut, this.options.selector, $.proxy(this.leave, this))
+        this.$element.on(eventIn + this.options.ns, this.options.selector, $.proxy(this.enter, this))
+        this.$element.on(eventOut + this.options.ns, this.options.selector, $.proxy(this.leave, this))
       }
 
       this.options.selector ?
@@ -236,7 +236,7 @@
     }
 
   , destroy: function () {
-      this.$element.off().removeData('tooltip')
+      this.$element.off(this.options.ns).removeData('tooltip')
     }
 
   }
@@ -266,6 +266,7 @@
   , title: ''
   , delay: 0
   , html: true
+  , ns: '.tooltip'
   }
 
 }(window.jQuery);
diff --git a/js/tests/unit/bootstrap-popover.js b/js/tests/unit/bootstrap-popover.js
@@ -92,12 +92,14 @@ $(function () {
       })
 
       test("should destroy popover", function () {
-        var popover = $('<div/>').popover()
+        var popover = $('<div/>').popover().on('click.foo', function(){})
         ok(popover.data('popover'), 'popover has data')
         ok(popover.data('events').mouseover && popover.data('events').mouseout, 'popover has hover event')
+        ok(popover.data('events').click[0].namespace == 'foo', 'popover has extra click.foo event')
         popover.popover('destroy')
         ok(!popover.data('popover'), 'popover does not have data')
-        ok(!popover.data('events'), 'popover does not have any events')
+        ok(popover.data('events').click[0].namespace == 'foo', 'popover still has click.foo')
+        ok(!popover.data('events').mouseover && !popover.data('events').mouseout, 'popover does not have any events')
       })
 
 })
diff --git a/js/tests/unit/bootstrap-tooltip.js b/js/tests/unit/bootstrap-tooltip.js
@@ -129,12 +129,14 @@ $(function () {
       })
 
       test("should destroy tooltip", function () {
-        var tooltip = $('<div/>').tooltip()
+        var tooltip = $('<div/>').tooltip().on('click.foo', function(){})
         ok(tooltip.data('tooltip'), 'tooltip has data')
         ok(tooltip.data('events').mouseover && tooltip.data('events').mouseout, 'tooltip has hover event')
+        ok(tooltip.data('events').click[0].namespace == 'foo', 'tooltip has extra click.foo event')
         tooltip.tooltip('destroy')
         ok(!tooltip.data('tooltip'), 'tooltip does not have data')
-        ok(!tooltip.data('events'), 'tooltip does not have any events')
+        ok(tooltip.data('events').click[0].namespace == 'foo', 'tooltip still has click.foo')
+        ok(!tooltip.data('events').mouseover && !tooltip.data('events').mouseout, 'tooltip does not have any events')
       })
 
 })