在 Grails 中调用 <g:remotelink> / Ajax 后下拉 bootstrap

Question

我正在做一个 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 调用后，下拉菜单崩溃并且无法工作除非我重新加载整个页面。

谁知道如何解决这个问题提前致谢。

Answer 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 drowdowns 将不起作用，然后我通过在 $(document).ready(function() 中声明提到的函数找到了这个问题的解决方案，如下所示：

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

在 Grails 中调用 <g:remotelink> / Ajax 后下拉 bootstrap

Dropdown bootstrap after <g:remotelink> / Ajax call in Grails

javascript

ajax

jquery

grails

twitter-bootstrap