Twitter引导可折叠文件不'；无法处理jquery.html（）加载的内容

编辑：通过链接jquery的正确版本来解决 我有一个用django构建的web应用程序。我有一个搜索页面，它使用jquery显示结果而不刷新页面。我想在搜索结果上使用collapsable，但它不起作用。 下面是代码，/query renders results.html。 Search.html：

{% extends "base.html" %}
{% block nav3 %}class="active"{% endblock %}
{% block container %}
<script type="text/javascript">
$(document).ready(function() {
    $("#exec").click(function() {
            var dataString = 'arg1='+ $("input#arg1").val() + '&rel=' + $("input#rel").val() + '&arg2=' + $("input#arg2").val();  
            //alert (dataString);return false;  
            $.ajax({  
                type: "GET",  
                url: "/query",  
                data: dataString,  
                success: function(data) {  
                    $(".res").html(data)
                }  
            });  
            return false; 
  });
});

</script>
<form class="form-horizontal">
    <fieldset>
          <legend>Search Relations</legend>
            <div class="control-group">
                <label class="control-label">   Argument1 </label>
                <div class="controls"><input id="arg1" name="arg1" size="30" type="text"/><br /></div>
                <label class="control-label">   Relation </label>
                    <div class="controls"><input id="rel" name="rel" size="30" type="text" /><br /></div>
                    <label class="control-label">   Argument2 </label>
                    <div class="controls"><input id="arg2" name="arg2" size="30" type="text"/><br /></div>
                </div>
                <div class="control-group">
                    <div class="controls"><button id="exec" class="btn btn-primary"> Search </button></div>
                </div>

    </fieldset>
</form>
<div class="res"></div>
{% endblock %}

{%extends“base.html”%}
{%block nav3%}class=“活动”{%endblock%}
{%block container%}
$（文档）.ready（函数（）{
$（“#exec”）。单击（函数（）{
var dataString='arg1='+$（'input#arg1'）.val（）+'&rel='+$（'input#rel”）.val（）+'&arg2='+$（'input#arg2'）.val（）；
//警报（数据字符串）；返回false；
$.ajax（{
键入：“获取”，
url:“/query”，
数据：dataString，
成功：函数（数据）{
$（“.res”）.html（数据）
}  
});  
返回false；
});
});
搜索关系
论据1


关系


论据2


搜寻
{%endblock%}

results.html：

{% if selected %}

<div class="accordion" id="accordion2">
        {% for rel in selected %}
            <div class="accordion-group">
              <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" data-target=".res#collapse{{ rel.id }}">
                  {{ rel.arg1 }} / {{ rel.rel }} / {{ rel.arg2 }}
                </a>
              </div>
              <div id="collapse{{ rel.id }}" class="accordion-body collapse">
                <div class="accordion-inner">
                  {{ rel.sentence }}
                </div>
              </div>
            </div>
        {% endfor %}
        {% else %}
                    <p>No matching relations are are available.</p>
</div>
{% endif %}

{%if selected%}
{所选%%中的rel为%0}
{{rel.arg1}/{{rel.rel}}/{{rel.arg2}
{{rel.句子}
{%endfor%}
{%else%}
没有可用的匹配关系

{%endif%}

---

当我将生成的html复制到另一个文件时，collapsable可以工作，但与.html（）一起使用时就不工作了。所有必要的文件都已链接

加载新内容后，必须再次调用collapse函数。所以

$.ajax({  
    type: "GET",  
    url: "/query",  
    data: dataString,  
    success: function(data) {  
        $(".res").html(data).collapse();
    }  
});  

---

您需要通过javascript手动启用它：

$(document).ready(function() {
    $("#exec").click(function() {
            var dataString = 'arg1='+ $("input#arg1").val() + '&rel=' + $("input#rel").val() + '&arg2=' + $("input#arg2").val();  
            //alert (dataString);return false;  
            $.ajax({  
                type: "GET",  
                url: "/query",  
                data: dataString,  
                success: function(data) {  
                    $(".res").html(data).collapse(); // add collapse!
                }  
            });  
            return false; 
  });
});

---

请发布示例引导可折叠的代码。您是复制/粘贴快速绘图！我试过了。我还添加了$（“.res”）.collapse（）；就在那之后，但它没有起作用。我认为它不起作用，因为它无法在html中找到#collapse{{{rel.id}}，因为它是通过ajax加载的。我不知道。你确定ajax命令返回的是有效的折叠容器吗？您确定容器没有包装在额外的div或html元素中吗？您必须在通常出现

数据切换=“collapse”

的元素上调用collapse（）。您也可以尝试

$（）。collapse（）

很抱歉，即使不手动调用collapse（），它也可以工作。当我使用jQuery1.7.1进行测试时，我正在链接jQuery1.6.4，它可以工作。再次抱歉。我现在该怎么办？我应该删除这个问题吗？不，这个问题应该有助于其他人，你把它留在这里。如果您觉得问题已经解决，您应该“接受”（单击答案旁边的复选框），以便其他人知道问题已经解决。