stop event propagation when using meteor autoform modal button

Question

I've created a list group that is wrapped in an afModal template. Inside the each list group item, there are glyphicon buttons that trigger different events.

<div class="list-group">
    {{#each getRuns}}
        {{#afModal title="Edit Run" class="list-group-item" collection="Runs" operation="update" doc=_id formId="editRunForm"}}
                {{#if active}}
                    <span class="glyphicon glyphicon-pause pull-right" name="pause" id="{{_id}}"></span>
                    <span class="badge">Active</span>
                {{else}}
                    <span class="glyphicon glyphicon-remove pull-right" name="delete" id="{{_id}}"></span>
                    <span class="glyphicon glyphicon-play pull-right" name="activate" id="{{_id}}"></span>
                {{/if}}
                <h3>{{name}}</h3>
                <p class="list-group-item-text">Assembly: {{assemblyName}}</p>
                <p class="list-group-item-text">Quantity: {{quantity}}</p>
                <p class="list-group-item-text">Progress: {{completedSteps}} of {{totalSteps}} steps completed</p>
        {{/afModal}}
    {{/each}}
</div

Here are the glyphicon click events

'click [name="delete"]': function(event) {
    if (confirmDelete()) {
        Meteor.call('removeRun', event.target.id, function(error) {
            if (error) {
                alert(error);
            }
        });
    }

    event.preventDefault();
},
'click [name="activate"]': function(event) {
    Meteor.call('activateRun', event.target.id);
    event.preventDefault();
},
'click [name="pause"]': function(event) {
    Meteor.call('pauseRun', event.target.id);
    event.preventDefault();
}

When the glyphicon click events are triggered, it also triggers the overlying afModal button. I've tried including event.stopPropagation(), event.stopImmediatePropagation(), and event.preventDefault() in the glyphicon click event to prevent the afModal from popping up but none of them work.

Previously, the list group was wrapped in link elements and looked something like this.

<div class="list-group">
    {{#each getRuns}}
        <a href="{{pathFor 'editRun'}}" class="list-group-item">
                {{#if active}}
                    <span class="glyphicon glyphicon-pause pull-right" name="pause" id="{{_id}}"></span>
                    <span class="badge">Active</span>
                {{else}}
                    <span class="glyphicon glyphicon-remove pull-right" name="delete" id="{{_id}}"></span>
                    <span class="glyphicon glyphicon-play pull-right" name="activate" id="{{_id}}"></span>
                {{/if}}
                <h3>{{name}}</h3>
                <p class="list-group-item-text">Assembly: {{assemblyName}}</p>
                <p class="list-group-item-text">Quantity: {{quantity}}</p>
                <p class="list-group-item-text">Progress: {{completedSteps}} of {{totalSteps}} steps completed</p>
        </a>
    {{/each}}
</div>

Using the "a" elements (and using the same glyphicon click event handlers) I was able to stop the "a" element from triggering. I'd really like to use the afModal template if possible but can't have the modal popping up every time one of the glpyhicons is clicked. Any advice?

Serkan Durusoy Serkan Durusoy · Accepted Answer · 2015-10-27T23:59:56

The key is calling the preventDefault before everything else, therefore changing

'click [name="pause"]': function(event) {
    Meteor.call('pauseRun', event.target.id);
    event.preventDefault();
}

to

'click [name="pause"]': function(event) {
    event.preventDefault();
    Meteor.call('pauseRun', event.target.id);
}

should work. Of course you should do that for all your event handlers.

stop event propagation when using meteor autoform modal button

1 Answers