Question

我创建了一个包含在afModal模板中的列表组。在每个列表组项目内，有一些glyphicon按钮可以触发不同的事件。

<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

以下是glyphicon点击事件

'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();
}

当触发glyphicon点击事件时，它还会触发覆盖的afModal按钮。我已经尝试在glyphicon click事件中包含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”元素（并使用相同的glyphicon click事件处理程序），我能够阻止“a”元素触发。如果可能的话，我真的很想使用afModal模板，但每次点击一个glpyhicons时都不能弹出模态。有什么建议吗？

Answer 1

关键是在其他所有事情之前调用function booking_Confirmation_Replace($conn, $confirmation_Email, $gp_ID){ //Get all tags $tag_Array = array(); if ($stmt = $conn->prepare("SELECT name FROM Booking_Confirmation_Tags ORDER BY name")) { $stmt->execute(); $stmt->bind_result($name); while ($stmt->fetch()) { $tag_Array[] = $name; //For each tag it finds, add to the array } $stmt->close(); } //Loop through each tag foreach ($tag_Array as $tag) { //find occurence of all tags in $confirmation_Email if (strpos($tag, $confirmation_Email) !== false) { //not working echo 'found occurance of word '.$tag.' <br />'; //If there's a match, get appropriate data (possible with case statement) and replace tag } else{ echo 'no occurance <br />'; } } //end foreach return $confirmation_Email; }，因此更改

preventDefault

到

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

应该有效。当然，您应该为所有事件处理程序执行此操作。

使用meteor autoform模态按钮

1 个答案: