Question

我在路线上有一个Semantic-ui模态，最初按预期工作（第一次加载应用程序）。我可以多次打开和关闭，没有问题。如果我离开路线并再次返回，然后再次单击模式按钮（触发下面的事件），模式html将被复制。每次我这样做（导航和返回），都会添加另一个模态。

我的模态分为两个模板，正如我所读到的那样，它应该是它的样式。

HTML：

<template name="contentList">
  {{> addContent}}
  <button class="ui blue button" href="#" id="modal">
    Add Content
  </button>
</template>

<template name="addContent">
  <div id="modal" class="ui small addContent modal">
    {{>addContentForm}}
  </div>
</template>

<template name="addContentForm">
  <!-- Form HTML goes here -->
</template>

JS：

Template.contentList.events({
  'click #modal': function(e, t) {
    event.preventDefault();
    $('.ui.modal')
    .modal({
      onApprove : function() {
        $('.ui.modal').modal('hide');
      }
    })
    .modal('show');
  }
});

我需要做些什么来阻止这种行为？

Answer 1

我不觉得自己像个傻瓜......

模态div重复的原因是{{>addContent}}模态放在div中。将该代码移出div修复了该问题。我错误地简化了我的问题中的代码！

Answer 2

更新

使用下面的解决方法测试了一些后，我遇到了按钮无法响应的问题。在进一步挖掘之后，我偶然发现了Semantic-ui的这个错误报告：https://github.com/Semantic-Org/Semantic-UI/issues/3200。

尽管问题自2016年以来一直存在，但似乎仍未解决。这里提供了几种解决方案。对我来说效果很好的一个是在动态模板的onCreated函数中调用$('body .modals').remove();。您还可以删除给您带来麻烦的特定模式：$('body .modals .addItem')。这样，在添加新模态之前，首先删除任何旧模态及其事件绑定。我仍然不完全确定这是否正是如此，但我的测试似乎支持它。

原帖

我遇到了一个非常类似的问题。明确的答案并没有为我解决。我有一个模态类的div。在其中我通过模板加载内容。它在打开，关闭，导航和返回后显示两个模态，然后再次打开它。

我注意到在导航过程中，模态会在某处添加两次到调光器div。所以我写了一个小函数来防止模态被多次添加。请注意，这是一种解决方法，可能会出现更深层次的问题，并产生更大的后果。

Template.editor.helpers({
  modalNotAdded: function(modalClass) {
    //search in .ui.modals div, an element of the dimmer, for modalClass (.addItemModal in this example). If not found, return true.
    return $(".ui.modals").find(modalClass).length == 0;
  }
});

<template name="editor">

  <!-- only add modal if modalNotAdded helper function with argument ".addItem" returns true !-->
  {{#if modalNotAdded ".addItem"}}
  <div class="ui longer modal addItem">
    {{> addItemModal}}
  </div>
  {{/if}}

</template>

<template name="addItemModal">
  <!-- your modal content !-->
</template>

Answer 3

让多个dom元素具有相同的id会导致意外行为。你有一个id为id＆＃34; modal＆＃34;并再次使用id＆＃34; modal＆＃34;。更改按钮的ID。

Semantic-ui模态复制

3 个答案:

更新

原帖