1

Technology

I am using jQuery 1.9.1 and twitter bootstrap 2.3.1

Context

I am currently facing a bug in the twitter bootstrap typeahead plugin that prevents you from entering in a "&" character in a input[type="text"] when the autocomplete drop down is open (Ampersand is returning keycode 38, Up arrow is keycode 38).

I want to be able to look through all of the events that are attached to the input[type="text"] and figure out what is causing the problem.

Problem

// bootstrap typeahead plugin
// bootstrap.js:2126
this.$element
  .on('focus',    $.proxy(this.focus, this))
  .on('blur',     $.proxy(this.blur, this))
  .on('keypress', $.proxy(this.keypress, this))
  .on('keyup',    $.proxy(this.keyup, this))

// bootstrap.js:2171
move: function (e) {
  if (!this.shown) return

  switch(e.keyCode) {
    case 9: // tab
    case 13: // enter
    case 27: // escape
      e.preventDefault()
      break

    case 38: // up arrow
      e.preventDefault()
      this.prev()
      break

    case 40: // down arrow
      e.preventDefault()
      this.next()
      break
  }

  e.stopPropagation()
}

The proxy method returns a new function with the given context and therefore makes it really difficult to debug.

What I found in Chrome - Doesn't help me at all

// Get event listeners on element
getEventListeners($('[name="searchTerm"]')[0])

// Get the keydown event to see what's going on
getEventListeners($('[name="searchTerm"]')[0]).keydown[0].listener

// Returns
function (a){return typeof f!="undefined"&&(!a||f.event.triggered!==a.type)?f.event.dispatch.apply(i.elem,arguments):b}

// <function scope> points back to the function above
// ['<function scope>'] is an example
getEventListeners($('[name="searchTerm"]')[0]).keydown[0].listener['<function scope>']

What I found in jQuery - Helps me awkwardly?

// Get event listeners on element
// $element.data('events') is no longer supported. version >= 1.8
$._data($('[name="searchTerm"]')[0], 'events')

// Get the keydown event to see what's going on
$._data($('input.search-query.span2')[0], 'events').keydown[0].handler

// Returns
function (){return a.apply(c,f.concat(F.call(arguments)))}

// <function scope> points to the correct function
// ['<function scope>']['Closure']['a'] is an example
$._data($('input.search-query.span2')[0], 'events').keydown[0].handler['<function scope>']['Closure']['a']

// Returns
function (e) { this.suppressKeyPressRepeat = ~$.inArray(e.keyCode, [40,38,9,13,27]) this.move(e) }

Questions

  1. Is there anyway to obtain the <function scope> and <closure> context out of a javascript function?
  2. Is there an easier way of debugging what $.proxy event listeners are fired on a DOM element using jQuery?
  3. Is there a better way of debugging these events?
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
chemoish
  • 1,210
  • 2
  • 13
  • 23
  • why can't put break points in the bootstrap-typeahead file and use the developer toolbar to debug the method execution. From what I can see the typeahead source will have methods like `focus` and `keydown`. – Arun P Johny Jun 01 '13 at 02:08
  • I also do not understand why would `$.proxy` make it difficult to debug – Arun P Johny Jun 01 '13 at 02:09
  • @ArunPJohny You can, but I have a site with over 50 different js files and about half of the javascript is inline. If I already knew where the problem was I could put breakpoints there, but I didn't. I wanted to "discover" what was causing the problem. – chemoish Jun 03 '13 at 16:37
  • @ArunPJohny $.proxy creates a closure with the scope of the context you passed it. This process masks the original function from being apparent. Returns a different $('body').click(function () {}); signature than $('body').click($.proxy(function () {}, this); — Try it – chemoish Jun 03 '13 at 16:39
  • See the answers here: http://stackoverflow.com/questions/570960/how-to-debug-javascript-jquery-event-bindings-with-firebug-or-similar-tool – niutech Aug 15 '14 at 20:58

1 Answers1

1

You can try the jQuery Debugger Chrome extension which shows jQuery event handlers. Firefox Nightly has a similar feature.

niutech
  • 28,923
  • 15
  • 96
  • 106