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

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

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

最佳答案

由于@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)
        ;});
;}

问题是我已经在函数动态中声明了函数$(".dropdown-toggle").dropdown();，但是在两次ajax调用后，boostrap drowdowns无法正常工作，然后我在$(document).ready(function()中声明了上述函数，从而找到了解决此问题的方法:

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

关于javascript - 在Grails中<g:remotelink>/Ajax调用之后的下拉引导，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30016636/