即使我单击一次，AJAX 也会多次调用

Posted 2023-05-08

【中文标题】即使我单击一次，AJAX 也会多次调用

【英文标题】：AJAX is calling multiple times even when i click once

【发布时间】：2021-08-27 06:07:44

【问题描述】：

我的 html 代码：

<div class="filter-section">
  % for key, values in positions.items %
    <h3>key</h3>
    % for position in values %
      <a id="view-job-position.id" style="cursor:pointer" onclick="getPositionInfo(position.id)" class="list-row">
       <span class="list-item">position.position_name</span>
      </a>
     % endfor %
    % endfor %
</div>

JS代码：

<script type="text/javascript">
    function getPositionInfo(id)
       var j_id = "#view-job-" + id;
       $(j_id).on('click', function(e) 
        e.preventDefault();
           $.ajax(
             url : '/apply_now/',
             type: 'POST',
             data:
               job_id : id,
               csrfmiddlewaretoken: ' csrf_token '
              ,
              success:function(data)
                alert(JSON.stringify(data));
              
             );
        );
    
</script>

问题： 第一次单击时没有任何反应，但从第二次单击开始，它会调用多次。 示例： 第一次点击 -> 没有电话 第二次点击 -> 调用 2 次 第三次点击 -> 调用 3 次 第 n 次点击 -> 调用 n 次

For 3rd click ajax called 5 times

【参考方案1】：

您在 HTML 中定义了一个onclick="getPositionInfo(position.id)"。此函数getPositionInfo 然后在此处调用$(j_id).on('click', function(e) 后立即将另一个onclick 添加到<a> 标记。所以下次你点击它时，你又添加了另一个onclick，同时也调用了你之前添加的onclick。