Phoenix Link 方法：:delete 在 Bootstrap 下拉菜单中不起作用答案

【问题标题】：Phoenix Link method: :delete doesn't work in Bootstrap dropdownPhoenix Link 方法：:delete 在 Bootstrap 下拉菜单中不起作用
【发布时间】：2016-10-14 23:55:31
【问题描述】：

在我的 phoenix 应用程序中，Bootstrap 下拉列表中的不起作用

  <ul class="nav navbar-nav navbar-right">
    <%= if !@conn.assigns.current_user do %>
      <li> <%= link "Log In" , to: session_path(@conn, :new) %></li>
    <% else %>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
          Hi!, <%= @conn.assigns.current_user.username %>
          <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
          <li><%= link "Log out", to: session_path(@conn, :delete, @conn.assigns.current_user), method: "delete" %></li>
          <li> <%= link "Log In" , to: session_path(@conn, :new) %></li>
        </ul>
      </li>
    <% end %>
  </ul>

但是当我把它放在“下拉菜单”之外时，它工作得很好。
当我将更改为时，它也可以正常工作！！

我的 brunch.js 在插件中包含了 sass

plugins: {
  babel: {
    // Do not use ES6 compiler in vendor code
    ignore: [/web\/static\/vendor/]
  },

  sass: {
    options: {
      includePaths: ["node_modules/bootstrap-sass/assets/stylesheets"], // tell sass-brunch where to look for files to @import
      // minimum precision required by bootstrap-sass
      //precision: 8
    },
    precision: 8
  },
  copycat: {
    "fonts": ["node_modules/bootstrap-sass/assets/fonts/bootstrap"]   // copy node_modules/bootstrap-sass/assets/fonts/bootstrap/* to priv/static/fonts/
  }
},

...
...

npm: {
  enabled: true,
  whitelist: ["phoenix", "phoenix_html", "jquery"],
  globals: { // bootstrap-sass' JavaScript requires both '$' and 'jQuery' in global scope
    $: 'jquery',
    jQuery: 'jquery',
    bootstrap: 'bootstrap-sass' // require bootstrap-sass' JavaScript globally
  }
}

我认为问题与javascript有关，但我不知道如何解决。
有人有同样的问题吗？谢谢！

【问题讨论】：

“不起作用”是指单击它时没有任何反应？还是样式不正确？或者你什么都看不见？还是别的什么？
它什么也没做。并且网址将在末尾附加一个“#”
您是否正确包含phoenix_html？在一个新项目中，brunch 配置有这个：javascripts: { joinTo: "js/app.js" } 和 app.js 它有 import "phoenix_html" 和 link method: :delete 与此一起使用。能否也检查一下生成的priv/static/js/app.js是否包含phoenix_html？
@Dogbert 是的，brunch.js 有 javascripts: { ... }，app.js 包括 phoenix_html

标签： javascript elixir phoenix-framework

【解决方案1】：

问题出在 Bootstrap 的 JavaScript 部分。

这是bootstrap.js 中的违规行（v3.3.7 上的第 910 行）：

.on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })

要使您的链接正常工作，您要么不必将链接包装在<form> 标记中，要么通过在app.js 中包含以下代码来删除此事件处理程序：

$(document).off('click.bs.dropdown.data-api', '.dropdown form');

【讨论】：