Я создал группу списков, заключенную в шаблон afModal. Внутри каждого элемента группы списка есть кнопки с глифами, которые запускают различные события.
<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
Вот события щелчка по глификону
'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();
}
Когда инициируются события щелчка по глификону, также активируется расположенная выше кнопка afModal. Я пытался включить event.stopPropagation(), event.stopImmediatePropagation() и event.preventDefault() в событие щелчка глификона, чтобы предотвратить появление afModal, но ни один из них не работает.
Ранее группа списка была обернута элементами ссылки и выглядела примерно так.
<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>
Используя элементы «a» (и используя те же обработчики событий щелчка глификона), я смог остановить срабатывание элемента «a». Я бы очень хотел использовать шаблон afModal, если это возможно, но не могу, чтобы модальное окно появлялось каждый раз, когда щелкают один из glpyhicons. Любой совет?