[RESOLVED] Having trouble with events on a template when the contents are moved by jQuery

I’ve got a page that’s structured roughly as follows:

<template name="CardForm">
  [...]
</template>

<template name="PlansSettings">
  {{> CardForm}}
  [...]
</template>

The CardForm template is a lightbox (handled by Magnific).

The issue is that any event I assign to the CardForm template doesn’t work - as in nada, nothing, they don’t trigger at all.

I suspect this is because the lightbox (CardForm) is actually removed from the DOM and re-rendered using jQuery (moved to the top of the body) - I have a feeling that Blaze loses track of it.

The problem is that moving the events to any other template doesn’t fix the issue. The above templates all render within a master template, even if I apply the events to the master template they still never trigger.

Interestingly, the onRendered works fine, even though it contains a jQuery validation submit (I’d have expected this submit to have the same issue as the event, but maybe things bind differently with onRendered).

So… any ideas how to work around this situation?

Well, still you did not specify what you are trying to accomplish.
I would expect that lightbox component can handle all these events itself, so maybe change some reactive variable inside it’s click event or which event you are trying to get working. According to your description, that reactive var probably need to be global.
And than act according to it from Blaze side.

Not sure I’m following.

I have a form inside the lightbox, and I have a few actions that relate to that form. They’re nothing to do with the lightbox.

I would use bootstrap modal with related package for modal loading.

I would expect same approach to be needed for that “lightbox” if you are not doing your own Blaze friendly lightbox implementation. Or some of these 7 available on atmosphere https://atmospherejs.com/?q=lightbox

Thanks all the same, but I wasn’t looking for recommendations for alternative lightbox plugins, I would just like to know what has caused the above issue and how to resolve it. Incidentally Magnific is an Atmosphere repo: https://atmospherejs.com/gabrielengel/konecty-magnific-popup

Aha, this is the solution: https://groups.google.com/forum/#!msg/meteor-talk/0Upkyo9F54k/McRPRy49IrgJ

Basically you just need to make sure that the template you’re targeting is within the element that’s moved, not the element itself. So the following works:

<template name="CardFormContent">
  [...]
</template>
<template name="CardForm">
  <div id="lightbox">
    {{> CardFormContent }}
  </div>
</template>

<template name="PlansSettings">
  {{> CardForm}}
  [...]
</template>

And then target actions within CardFormContent.

1 Like