Semantic UI Modal 只在 Meteor 中出现一次答案

【问题标题】：Semantic UI Modal only shows up once in MeteorSemantic UI Modal 只在 Meteor 中出现一次
【发布时间】：2023-03-24 14:47:01
【问题描述】：

我有一个使用语义 UI 的流星应用程序。我为此使用了语义：ui-css 包。

我有一个名为 project 的模板，我想在其中显示一个模式。我在那里创建了第二个模板，它是这样的模态：

<template name="xform">
  <div id="modal" class="ui modal">
  <i class="close icon"></i>
  <div class="header">New Project</div>
  <div class="content">
    <div class="ui form" id="newProject">
      <div class="one fields">
        <div class="field">
          <legend>Project Details</legend>
          <label>Name</label>
          <input id="name" name="name" type="text" placeholder="Project name">
        </div>
        <input type="submit" class="button small createProject" style="color:white;position:relative;float:right;padding: 0.875rem 1.75rem 0.9375rem 1.75rem;font-size: 0.8125rem;" value="Create">
      </div>
    </div>
  </div>
  <div class="actions">
    <div class="ui button">
      Cancel
    </div>
    <div class="ui button">
      Okay
    </div>
  </div>
  </div>
</template>

然后我已经向这样的按钮添加了一个事件来显示模式：

Template.projects.events({
  'click .newProject': function(event, template){
    template.$('.ui.modal').modal({
          onDeny    : function(){
            return false;
          }}).modal('show');
  }
});

如果我第一次单击该按钮，模态将按需要打开。我可以看到模态现在不在我的模板的 html 中，而是在我的正文的末尾。我可以使用关闭按钮关闭模式，但是当我现在尝试再次打开它时，它不再打开。模态 div 仍然在我的身体底部。

我已经尝试了几种方法来解决这个问题，但都没有奏效。

这是我的完整代码：http://i.imgur.com/r9JNrlr

【问题讨论】：

您基本上已经回答了这个问题，语义 ui 模态代码将 div 移动到正文的底部，因此当您调用 template.$('.ui.modal')... 时，您只是在内部“寻找”.ui.modal模板 - 在本例中为“项目”模板。最简单但不一定正确的方法是只使用全局 jQuery 对象$('.ui.modal')。不一定正确，我的意思是您可能应该使用唯一的 id 属性来引用它，以避免多个模式之间的冲突。
我已经按照您刚才描述的方式进行了尝试，仅使用 jQuery 而不引用模板，但随后我得到“未捕获的 TypeError：$(...).modal 不是函数”。我不知道为什么会这样。
奇怪，我刚刚敲了一些测试代码，它对我来说工作正常。您的任何模板中是否有标签？想知道这是否与此处解决的问题类似：stackoverflow.com/a/30381769/2723753
不，我正在使用 IronRouter 并加载一个 layoutTemplate，它有标题并在产量中显示内容。我没有身体标签，因为 Iron Router 为我做了这个。有问题吗？

标签： javascript jquery css meteor semantic-ui

【解决方案1】：

为了跟进我的评论，这是对我有用的代码。看来您在 jQuery 查找多个元素时遇到了问题。我创建了一个新的流星项目：

$ meteor create semantic
$ cd semantic
$ meteor add semantic:ui-css
$ meteor add iron:router

semantic.html

<template name="MainLayout">
    <h1>Title</h1>
    {{> yield}}
</template>

<template name="projects">
    {{> xform}}
    <button class="newProject">New Project</button>
</template>

<template name="xform">
  <div id="modal" class="ui modal">
  <i class="close icon"></i>
  <div class="header">New Project</div>
  <div class="content">
    <div class="ui form" id="newProject">
      <div class="one fields">
        <div class="field">
          <legend>Project Details</legend>
          <label>Name</label>
          <input id="name" name="name" type="text" placeholder="Project name">
        </div>
        <input type="submit" class="button small createProject" style="color:white;position:relative;float:right;padding: 0.875rem 1.75rem 0.9375rem 1.75rem;font-size: 0.8125rem;" value="Create">
      </div>
    </div>
  </div>
  <div class="actions">
    <div class="ui button">
      Cancel
    </div>
    <div class="ui button">
      Okay
    </div>
  </div>
  </div>
</template>

semantic.js

if (Meteor.isClient) {
  Template.projects.events({
    'click .newProject': function(event, template){
      $('.ui.modal').modal({
            onDeny    : function(){
              return false;
            }}).modal('show');
    }
  });

  Meteor.startup(function() {
    Router.configure({
      layoutTemplate: 'MainLayout'
    })
    Router.route('/',{
      name: 'projects'
    })
  });
}

在运行meteor 并加载http://localhost:3000 之后，我可以多次打开和关闭模态。

【讨论】：

我已将 jquery 行更改为使用 $('#modal') 而不是应该阻止这些事情的类，但它仍然不起作用。
如果我在我的项目和您使用的代码中执行 console.log($('#modal')) （这显然也适用于我）它们都显示相同但在我的项目中问题依然存在。
我仍然找不到错误。我有和你一样的结构。

【解决方案2】：

尝试在模板的onRendered回调函数中设置modal不可分离。

Template.projects.onRendered(() => {
    $('.ui.modal').modal({ detachable: false });
});

希望对你有帮助。

【讨论】：