Twitter bootstrap collapsable не работает с содержимым, загруженным jquery .html()

Question

Редактировать: разрешено путем ссылки на правильную версию jquery У меня есть веб-приложение, созданное с помощью django. У меня есть страница поиска, которая использует jquery для отображения результатов без обновления страницы. Я хочу использовать collapsable в результатах поиска, но он не работает. Вот код,/query выводит 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 %} 

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 %} 

Когда я скопировать сгенерированный HTML в другой файл складные работает, но он не работает, когда она используется с .html() , Все необходимые файлы связаны.

Answer 1

Вам необходимо включить его вручную с помощью 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; 
    }); 
}); 

Answer 2

После загрузки нового содержимого вам нужно будет вызвать функцию коллапса. Так что ...

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