Question

我想点击链接打开div。链接值包含数据行的id。我正在使用ajax将数据发布到表单。

template.html

<div id="authorisedreporter" {% if not registerform.errors %}style="display:none"{% endif %}>
 <form method="post" action="." id="reporter-form">
 {% csrf_token %}
 <table  width="100%">
 <tr>
   <td style="width:100px;">First name:</td><td>{{registerform.first_name}} </td>
 </tr>
 <tr>
    <td>Last name:</td><td>{{registerform.last_name}} </td>
 </tr>
     ''''''''''''''''
     some data here
     '''''''''''''''
 </table></form></div>

当页面加载时，上面的div处于隐藏状态。我想在点击链接时打开div。

<td style="width:120px;"><a href="{{ list.0.id }}">{{list.0.first_name|title}} {{list.0.last_name}}</a></td>

需要帮助。

Answer 1

首先将href="#"或href="javasctipt:void(0)放入您的锚标记中，并将id放入锚标记的其他属性中。然后脚本将是

$(document).ready(function(){
   $('a').click(function(){
      $('#authorisedreporter').show();
   });
});

Answer 2

如果链接不是链接，请不要使用链接，在您的情况下，它更像是<button>：

<td style="width:120px;"><button id="{{ list.0.id }}" class="js-openDiv">{{list.0.first_name|title}} {{list.0.last_name}}</button></td>

无论如何，方法是相同的，将类class="js-openDiv"添加到<a>或<button>并在jQuery中将其用作选择器：

$('.js-openDiv').click(function () {
    var this_id = $(this).attr('id');  // the list ID
    // do something with the ID

    $('#authorisedreporter').show();
});

修改

如果您决定坚持使用<a>代码：

<td style="width:120px;"><a id="{{ list.0.id }}" class="js-openDiv" href="#">{{list.0.first_name|title}} {{list.0.last_name}}</a></td>

jQuery代码会有所不同：

$('.js-openDiv').click(function (e) { e.preventDefault(); var this_id = $(this).attr('id'); // the list ID // do something with the ID $('#authorisedreporter').show(); });

希望有所帮助

使用ajax在链接上调用div

2 个答案: