Question

I have code like this:

_removeSelection : function(e, refocus) {

  var thisObj      = e.data,
      lineItem     = $(this).closest('li'),
      templateData = lineItem.data('templateData');

  thisObj.element.trigger('beforeRemoveSelection',[templateData]);

  lineItem.remove();

  thisObj._selection_items = $(thisObj._selections).find('li');

  if ( ( refocus != 'undefined' && refocus === true ) || refocus == 'undefined') {
    thisObj.refocus();
  }

  thisObj.element.trigger('toggleSelection');
  thisObj.element.trigger('limitNotHit', [true]);
  thisObj.element.trigger('removeSelection',[templateData]);

}

Everything logs fine and it appears to execute fine. However after all my code runs I get an exception:

“Object doesn’t support property or method ‘getAttribute'”

So I have a loop that calls the function X times, but it only runs the function to completion once.

EDIT: The loop triggers a click on an element which runs that function. If I manually trigger the click using firebug, it still throws exception

EDIT 2: The exception is thrown at line 4550 in jquery-1.6.2.js

Doing lineItem[0].parentNode.removeChild( lineItem[0] ); also causes delayed exception. Looks like @zzzz is right about some weird cache cleanup.

This only happens when using .trigger(‘click’), not when actually clicking on the element

Answer 1

I believe this is because IE bubbles the click event to a node that no longer exists (and then jQuery tries to do something with that?).

I assume because your click removes the parent element, so when it tries to bubble to that element it breaks.

Anyways, I have seen the exact same thing in IE when using backbone.js to re-render on change events – change event bubbles up but node no longer exists (because its been rendered again so it’s a new node) and it fires this error.

Using event.stopPropagation [ http://api.jquery.com/event.stopPropagation/ ] has worked to solve this for me in the past, give it a shot.