<g:remotelink> / Ajax 在 Grails 中调用之后的下拉引导答案

【问题标题】：Dropdown bootstrap after <g:remotelink> / Ajax call in Grails<g:remotelink> / Ajax 在 Grails 中调用之后的下拉引导
【发布时间】：2015-05-03 16:54:45
【问题描述】：

我正在做一个 Grails 项目，我有这个下拉列表：

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" >${category.getName()} <span class="caret"></span></a>
    <ul class="dropdown-menu" role="menu">
        <li>
        <g:remoteLink controller="todo" action="getTodos" update="dynamic" method="GET" id="${category.id}" onSuccess="dynamics()">Ver
                    </g:remoteLink>
    </li>
            <li><a href="#">Modificar</a></li>
            <li><a>Eliminar</a></li>
    </ul>
</li>

以及 JS 上的这个函数：

function dynamics(){
    $("#dynamic").addClass("dynamicSet").removeClass("dynamicBefore");
    $(".dropdown-toggle").dropdown();
}

问题是：在 ajax 调用之后，jscode $(".dropdown-toggle").dropdown(); 下拉菜单正常工作，但是在执行另一个 ajax 调用之后，下拉菜单崩溃并且除非我重新加载整个页面，否则将无法工作。

任何人都知道如何解决这个问题提前致谢。

【问题讨论】：

我无法理解您在查看 HTML 时要做什么在我看来，您的下拉菜单中只有一个元素。该元素是一个remoteLink。我认为这不是你想要做的。在任何情况下，remoteLink 和其他与 ajax 相关的标签都已弃用。我建议您使用 jquery 或其他库自己实现。
您好@Fernando，感谢您的帮助，我使用jQuery创建了自己的ajax调用实现，我发现函数$(".dropdown-toggle").dropdown();应该在函数onsuccess()之外调用为了重新动画引导的下拉菜单。

标签： javascript jquery ajax twitter-bootstrap grails

【解决方案1】：

由于@Fernando 建议实现我自己的 ajax 调用而不是使用 <g:remotelink>，我将代码更改为：

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" >${category.getName()} <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
    <li><a data-id="${category}" onclick="dynamics('${category.id}')"  class="button">Ver
    </a></li>
    <li><a href="#">Modificar</a></li>
    <li><a>Eliminar</a></li>
</ul>
</li>

function dynamics(id){
        $.get("<g:createLink controller='todo' action='getTodos' />",  {"id":id}, function(respuesta){
              $("#dynamic").addClass("dynamicSet").removeClass("dynamicBefore").html(respuesta)
        ;});
;}

问题是我已经在函数 dynamics 中声明了函数$(".dropdown-toggle").dropdown();，但是在两次 ajax 调用后，boostrap 下拉菜单不起作用，然后我通过声明提到的方法找到了解决此问题的方法$(document).ready(function() 中的函数如下：

$(document).ready(function() {
        $("#dynamic").addClass("dynamicBefore");
        $(".dropdown-toggle").dropdown();
    });

【讨论】：