在Flask app

Question

我正在写一个烧瓶应用程序来管理库存（库存）。我有一个包含库存信息和1个按钮（转移）的表格。当我按下传输时，我想要在第一列中显示一行复选框以及两个按钮，一个用于提交传输，另一个用于取消。

当按下取消时，应取消选中所有选中的复选框。 当我在一个简单的html文件中编写并测试它时，一切正常。现在，当我尝试使用Jinja2模板将其整合到Flask应用程序中时，我的一些jQuery不再起作用了。

编辑：这是小提琴： https://jsfiddle.net/JRSl/r1oykmem/

这两个部分在烧瓶中不起作用：

 $("#cancel-transfer").click(function(){
      if($(".case:checked").length >0) {
        $(".case").removeProp("checked");
      }
      if($("#selectAll:checked")) {
        $("#selectAll").removeProp("checked", "checked");
      }
    });

和这一行：

$(".case").click(function(){

        if($(".case").length == $(".case:checked").length) {
            ...
        } else {
            $("#selectAll").removeProp("checked");
        }

    });

这是我的 jQuery ：

{% block scripts %}
  {{super()}}
  <script>

    $("#transfer-btn").click(function(){
      $(".checkbox, #transfer-btn, #transfer-stocks-btn, #cancel-transfer").toggle();
    });

    $("#cancel-transfer").click(function(){
      $(".checkbox, #transfer-btn, #transfer-stocks-btn, #cancel-transfer").toggle();
      if($(".case:checked").length >0) {
        $(".case").removeProp("checked");
      }
      if($("#selectAll:checked")) {
        $("#selectAll").removeProp("checked", "checked");
      }
    });

    $(function(){

    // add multiple select / deselect functionality
    $("#selectAll").click(function () {
          $('.case').prop('checked', this.checked);
    });

    // if all checkbox are selected, check the selectall checkbox
    // and viceversa
    $(".case").click(function(){

        if($(".case").length == $(".case:checked").length) {
            $("#selectAll").prop("checked", "checked");
        } else {
            $("#selectAll").removeProp("checked");
        }

    });
  });
  </script>
  <script type=text/javascript src="/static/jquery.min.js"></script>
{% endblock %}

我添加了样式：

{% block styles %}
  {{super()}}
  <style>
    .checkbox {
      display: none;
      margin: 0;
    }

    #transfer-stocks-btn, #cancel-transfer {
      display:none;
    }

  </style>
{% endblock %}

以下是 Jinja2模板：

{% extends "base.html" %}
{% block page_content %}

  <div>
    {% if user == current_user %}

      <button class="btn btn-default" id="transfer-btn">
        Transfer
      </button>

      <button class="btn btn-default" id="transfer-stocks-btn">
        Transfer stocks
      </button>

      <button class="btn btn-default" id="cancel-transfer">
        Cancel
      </button>

    {% endif %}

  <div>
    <table class="table table-hover  table-condensed">
       <thead>
         <tr>
           <th>
             <div class="checkbox">
               <label><input type="checkbox" id="selectAll"/>&nbsp;</label>
             </div>
           </th>
           <th>Stock ID</th>
           <th>Name</th>
           <th>vendor Id</th>
           <th>Comments</th>
         </tr>
       </thead>
       <tbody>
         {% for stock in stocks %}
         <tr>
           <td>
             <div class="checkbox">
               <label><input type="checkbox" class="case" />&nbsp;</label>
             </div>
           </td>
           <td>{{ stock.id }} </td>
           <td>{{ stock.name }}</td>
           <td>{{ stock.vendor}}</td>
           <td>{{ stock.comment }} </td>
         </tr>
         {% endfor %}
       </tbody>
   </table>
  </div>
</div>

{％endblock％}

非常感谢您的帮助！