Question

我对jQuery很新，即使有很多关于如何绑定到按钮的教程，我相信我的设置有点复杂（超出范围）。

我有什么：

- 我正在使用Django在视图上填充我的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）可供选择的不同按钮。正如你所看到的那样，id和id是唯一的，其中id是数据库中的主键（这显然很重要）

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

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

同时，jQuery将隐藏/删除按钮元素（琐碎）
这是通过以下代码片段完成的（anf将fadeout添加到点击监听器：
```
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
});

Answer 2

首先，按钮的事件关联应该通过类更好（这是一种更好的做法）。对于javascript点击代码检查其他答案。对于ajax请求，您可以参考以下链接：

https://api.jquery.com/jquery.post/

https://api.jquery.com/jquery.get/

https://api.jquery.com/jquery.when/

通过示例'when'函数，它允许您知道请求何时结束并执行之后的任何操作。

Answer 3

从您回复的评论中我希望您在已经呈现的按钮之前附加处理程序，因此我建议您使用这样的冒泡事件概念： -

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

并弹出警报，你可以做任何你想做的事情。

使用jQuery for buttons / ajax requests

3 个答案: