javascript - 使用 jQuery 处理按钮/ajax 请求

Question

我对 jQuery 相当陌生，尽管有很多关于如何绑定(bind)到按钮的教程，但我相信我的设置有点复杂(超出了范围)。

我有:

-我正在使用 Django 在 View 上填充我的 Makes。

这是我的模板:

    <div class="container">
    <div class="row">
    <div class="btn-group" id="makesTable">
    {%  if makes %}
    {% for make in makes %}
    <button  type="button" name="button" class="btn btn-default" id="{{ make.id }}">
        <br />
        <img class="center-block" src="[REDACTED]"  />
        <br />
        <p>{{ make.name }}</p>
    </button>
    {% endfor %}
{% endif %}
</div>
</div>
</div>

我目前遇到响应式设计问题。我希望将按钮排列在 5x7 网格中，但是，有时，我会遇到以下问题:

This is how it looks when everything is good!

This is the problem. Notice the spacing with a ?

工作流程:

• 用户会看到 (35) 个不同的按钮可供选择。正如你所看到的，name和id是唯一的，其中id是数据库中的主键(这显然很重要)

• 我可以使用 jQuery 使用此函数捕获主键:

  $(document).ready(function() {
    $("button").click(function() {
      var make_id = $(this).attr('id')
     });
  });
  

• 同时，jQuery 将隐藏/删除按钮元素(简单)
  这是通过以下代码片段完成的(anf 将淡出添加到点击监听器:

  function fadeOut() { $( "#makesTable" ).fadeOut( "slow", function() {}); };  
  

• 然后我想使用单击按钮的 id 对我的 API 执行 AJAX 请求，其中 django URL 路由是:

  url(r'^makes/(?P<pk>[\d]+)/$', views.MakesDetail.as_view(), name='makes-instance'),  
  

  换句话说，AJAX 请求将发送至 mysite.com/api/makes/(this.id) 并返回一个 JSON 文件(感谢 DRF，已完成设置。)

响应示例:

{
"name": "BMW",
"model": [
    {
        "name": "2 Series",
    },
    {
        "name": "3 Series",
    }]
 }

• 最后，我希望使用此 API 响应来填充类似的按钮模板(用型号替换品牌。)

这适用于单页应用程序，在某种意义上，使用 JSON 和 AJAX 无需刷新页面。

全面披露:我是一名入门级程序员/网络开发人员。

代码片段:

<div class="main-content container-fluid"> 
 <div class="container">
   <div class="row">
     <div class="btn-group" id="makesTable">
        <button  type="button" name="button" class="btn btn-default" id="200002038">
        <br />
        <img class="center-block" src=" "  />
        <br />
        <p>Acura</p>
    </button>

    <button  type="button" name="button" class="btn btn-default" id="200464140">
        <br />
        <img class="center-block" src=""  />
        <br />
        <p>Alfa Romero</p>
    </button>

<script>
  $(document).ready(function() {
   $(document).on( "click", "button", function() {
     alert($(this).attr('id')); //testing functionality
    });
 });
</script>
<script src="assets/lib/jquery/jquery.min.js" type="text/javascript"></script>
<script src="assets/lib/perfect-scrollbar/js/perfect-scrollbar.jquery.min.js" type="text/javascript"></script>
<script src="assets/js/main.js" type="text/javascript"></script>
<script src="assets/lib/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function(){
    //initialize the javascript
    App.init();
  });

</script>
</div>
 </div>
  </div>
   </div>

Answer 1

由于按钮是动态生成的。您必须像这样创建处理程序:

$(document).on('click', 'button.btn', function(e) {   
    alert($(this).attr('id')); //testing functionality
});