Phoenix Link方法:: delete不在Bootstrap下拉列表中工作

时间:2016-10-08 06:39:01

标签: javascript elixir phoenix-framework

在我的凤凰应用中,<%= link ... ,,方法:: delete%>在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>

但是当我在&#34;下拉菜单&#34;之外,它可以正常工作。
当我改变&lt;%= link ...%&gt;到&lt;%=按钮...%&gt;,它也可以正常工作!!

我的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有关,但我不知道如何修复它。
有人有同样的问题吗?谢谢!

1 个答案:

答案 0 :(得分:7)

问题来自Bootstrap的JavaScript部分。

以下是bootstrap.js中的违规行(第3.3.3行第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');