javascript - 使用ajax在链接点击上调用div

Question

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

模板.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

如果不是链接，请不要使用链接，在您的情况下，它更像 <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();
});

希望对你有帮助