Foundation events don't work

My code

{{#with profile}}

        {{> foundation}}
{{/with}}


<template name="foundation">
    <div id="userprofile" class="reveal-modal" data-reveal>
         <h2 id="selectedProfileName">{{name}}</h2>
        <div class="large-12 columns paddingtop">
            <div class="large-3 columns">
                <img id="selectedProfilePicture" src="{{picurl}}" />
                <p id="selectedProfileLink" ><a href="/accounts/profile/{{_id}}" >Open Profile</a></p>
            </div>
        </div>
        <div class="columns right">
            <div id="btnCancel" class="btnCancel button button-register small">Cancel</div>
            <div id="btnConfirm" class="btnConfirm button button-register small" data={{_id}}>Okay</div>
        </div>      
        <a class="close-reveal-modal">&#215;</a>
    </div>
</template>

      

I open modal using JS

$("#userprofile").foundation("reveal","open");

      

My events

Template.foundation.events({
    'click .btnConfirm':function(evt){
        console.log("confirm");
        $('#curator_name').val("");
        $('#confirmationText').html("");
    },
    'click .btnCancel':function(){
        console.log("close");

    },
});

      

They don't shoot, everyone faces the same problem.

I tried to put all the modal code in the parent template and bind the events, which doesn't work either

+3


source to share


2 answers


It is possible that, like Semantic-UI and some other frameworks, Foundation modals are removed from the DOM and programmatically added elsewhere (for example, at the end of the body). If so, then event handlers registered with the enclosing template will no longer be able to find them.

The solution is to define a template in your modal and attach events to it. Something like:

<template name="foundation">
  <div id="userprofile" class="reveal-modal" data-reveal>
    {{> foundationInner}}  
  </div>
</template>

<template name="foundationInner">
  <h2 id="selectedProfileName">{{name}}</h2>
  <div class="large-12 columns paddingtop">
    ...
  </div>      
  <a class="close-reveal-modal">&#215;</a>
</template>

      



Then register all event handlers on foundationInner

(which does not move relative to its parent view).

If, of course, there is no detachment and re-attachment in the Foundation, then this is completely different. Read more about this question here .

+11


source


    Template.foundation.rendered = function() {
       // your code to show the modal
       $("#userprofile").foundation("reveal","open");

    }

      



+1


source







All Articles