Bootstrap Accordion 和 Ajax（在 Flask 上）答案

【问题标题】：Bootstrap Accordion and Ajax (on Flask)Bootstrap Accordion 和 Ajax（在 Flask 上）
【发布时间】：2014-01-18 16:49:24
【问题描述】：

全部，

我正在尝试使用 ajax 使用 html 填充 boostrap 手风琴展开的 div - 即，仅当用户展开折叠的手风琴元素时才加载 html。 HTML 是：

<script src="/static/expand_db.js"></script>
<div class="container">
    <div class="row">
        <div class="col-md-8">
            <div class="panel-group" id="accordion">
                <div class="panel panel-default">

                    <div class="panel-body ">This is the panel's body</div>

                    <div id="collapse0" class="panel-collapse collapse">
                        <div class="panel-body">expanded content - this is to be loaded with ajax</div>
                    </div>

                    <div class="panel-footer">
                        <a id="expand0" data-toggle="collapse" data-parent="#accordion" href="#collapse0">Expand</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

相关的 javascript（直接来自烧瓶文档）是：

  $(function() {
  $('a#expand0').on('show.bs.collapse', function (){
      $.getJSON($SCRIPT_ROOT + '/_add_numbers', {
        a: $('input[name="a"]').val(),
        b: $('input[name="b"]').val()
      }, function(data) {
        $("#result").text(data.result);
      });
      return false;
    });
  });

现在（很明显），代码将不起作用（没有 var 的 a 和 b，'#results' div 未定义，留作后续/编辑供以后使用），但监控控制台（使用 Eclipse、flask请求显示在那里），按下“扩展”链接时似乎根本没有服务器调用。请注意，手风琴工作正常（展开和折叠）。

更换 $('a#expand0').on('show.bs.collapse', function (){ 与 javascript 中的$('a#calculate').bind('click', function() { 显示了正确的服务器调用：“127.0.0.1 - - [18/Jan/2014 11:45:58] "GET /_add_numbers HTTP/1.1" 404 -"

但会覆盖手风琴展开功能（这是有道理的）。

有什么想法吗？

【问题讨论】：

标签： javascript ajax twitter-bootstrap flask

【解决方案1】：

当您交换使用click 绑定时，在函数末尾返回false 将覆盖折叠函数。删除 return false; 可能会有所帮助。

至于使用show.bs.collapse 绑定，真的是a#expand0 元素有show.bs.collapse 事件吗？不是#collapse0 元素（或其他元素之一）吗？

【讨论】：