Blaze: Uncaught Error: Must be attached

[mitar]

See example project. When clicking on "Click Me" button, there is an uncaught Error: Must be attached.

Uncaught Error: Must be attached domrange.js:337
DOMRange.containsElement domrange.js:337
(anonymous function) view.js:741
(anonymous function) events.js:47
jQuery.event.dispatch jquery.js:4624
elemData.handle jquery.js:4292

[andylash]

I see this periodically. It seems to happen more often on Safari. I don't have a repro, but thought it was worth mentioning so it didn't seem as rare.

[sircharleswatson]

I too am seeing this error. I'll post any updates if I figure out what is happening.

[sircharleswatson]

ok, so, I was just playing around a bit with @mitar 's example.

If you put the "click" event first, before the "click button" event, the "Must be attached" error goes away and it seems to function as intended.

[Slava]

Thanks @mitar, confirming this as a bug.

What happens here is:

• You click on a button
• button removes the document model associated with it and that removes the dom node
• the dom node is already removed but there are outstanding event handlers

There is no a single most obvious way to fix them. One of the ways would be to not remove the DOM node until all the event handlers are fired, but that's raises other questions. Another way is to not fire the rest of the event handlers after the DOM node is removed.

[steph643]

Get this as well.

It seems the issue appeared in Meteor 1.1-rc.0 (I was using the Windows Preview before).

In my case I don't destroy the same DOM node the event is fired upon, but another one. Because of this, and because I have only one event handler, I don't see how an "outstanding event handlers" could cause the issue.

Nevertheless, I followed @Slava's idea number one and solved this by putting my destroying function in a Meteor.defer().

[serkandurusoy]

I confirm that Meteor.defer() does the job in making the error disappear.

In my case raising the catchall click was not an option because it is used as a trigger to remove the enclosing do through a reactiveVar on the parent template. It works like a show/hide details in a table row and the button that I wanted to catch the specific click on is also used for deleting that document from the collection.

[That-David-Guy]

I have a similar issue, but couldn't get the Meteor.defer() to work. Are you able to provide an example please @serkandurusoy?

My Template:

<template name="speechListItem">
  <li>
    {{title}}
    <button class="delete">X</button>
  </li>
</template>

My Event listener:

Template.speechListItem.events({
  'click button.delete': function(event) {
    event.preventDefault();
    Speeches.remove(this._id)  
    // Tried using Meteor.defer(function() { Speeches.remove(this._id) }); but nothing happened
  },
  'click li': function() {
    // when this event is here it causes 'Uncaught Error: Must be attached', but still deletes the element
    // If I remove this event listener it also works, but with no error
  }
});

[serkandurusoy]

@That-David-Guy you could switch the order of click li and click button.delete

[That-David-Guy]

Tried that as well. Didn't work.
As in the error still showed.

[That-David-Guy]

If I change my li to divs and select it with classes. I don't get the error.

[ghost]

I experienced similar.
li element node, with an embedded remove button.
both have click handlers.
this worked for me, maybe it's useful for others: event.stopPropagation();

[sferoze]

I am having this issue as well. But I cannot reproduce it reliably which is a huge headache.

It happens once in awhile. Basically I have 2 click handlers setup on 2 dom elements attached using Template.events

One click handler routes to a new page, the other just toggles a class to open the sidebar.

But for some reason, after a hot code push I think, the click handlers break, and when I click the elements it console.log Blaze: Uncaught Error: Must be attached

These are simple click handlers yet I get this error once in awhile.

Even refreshing the page does not help to fix the click handlers. So a user would just think the entire site is broken even after refreshing the page.

You have to actually quit the tab, and then navigate back to the app in a new tab. Then the click handlers work again.

This is a problem for me, and a headache since I cannot reproduce reliably. It just shows itself once in-awhile.

Any suggestions on what to try? I don't even know how to debug. First of all these are just simple click handlers. I am not removing anything from the dom after clicking them.

[sferoze]

I think I may have solved the core issue which was causing this bug. The problem was in the destroyed callback. Take a look

ORIGINAL CODE

Template.notepad.destroyed = ->
  t = @
  t.instance.clear()

NEW CODE

Template.notepad.destroyed = ->
  t = @

  if t?.instance? and t?.instance?.clear?
      t.instance.clear()

I believe this has solved the issue for me. When the issue arose, typically after making changes to the code and having hot reload the issue still persisted. But after this change, the issue disappeared.

[mitar]

What is t.instance in your case?

[sferoze]

it is a meteor easy search component

t.instance = EasySearch.getComponentInstance
    index: 'notes'

[Anima-t3d]

This seems to occur when a template onDestroyed causes an exception? Is it worth investigating whether an onDestroyed (more specific an exception in onDestroyed) can affect other templates and give an Uncaught Error: Must be attached error?

[drbruddet]

Hey guys, just to let you know if it can help someone, I had this error when I wanted to delete my list. here is the solution I could manage:

Code before:
`'lists.remove'(listId) {
check(listId, String);

    const list = Lists.findOne(listId);

        Tasks.remove({"listId": listId});
        Lists.remove(listId);
},`

Just used the if (!this.isSimulation) statement

Code working without error:
'lists.remove'(listId) {
check(listId, String);

    const list = Lists.findOne(listId);

    if (!this.isSimulation) {
        Tasks.remove({"listId": listId});
        Lists.remove(listId);
    }
},

Hope it can help someone.

Cheers

[mitar]

Could you make a reproduction where this happens regularly?

[drbruddet]

You can find the test project from this commit:
https://github.com/guillaumeko/my-todo/tree/86dd9d58e1a1b4323d98182fe02f4a920244ecb4
It happened everytime I deleted a List by the delete cross icon.

Let me know if you need anything else. Thanks

[MartinWillitts]

I had a panel with a submit event that had no selector. I added it in the process of converting from SemanticUI to MaterializeCSS.
'submit'(event) { event.preventDefault(); },
I should have had a selector e.g.:
'submit .shoot_sign_up_form'(event) { event.preventDefault(); },
then I stopped seeing the 'must be attached' warning.

[hwillson]

This issue has been moved to meteor/blaze#213 - closing here. Thanks!