jQuery / Ajax完成事件仅运行一次

Question

以下代码成功运行并将新值添加到数据库中...

<script type="text/javascript">
$(document).ready(function() {
  var i = 0;
  $(".testClick").click(function () {
    var dbvalue = $(this).data('dbvalue');
    var task_id = $(this).data('wrkval');
    $.ajax({
      type: 'POST',
      url: '/tasks/update_sub_task',
      dataType: 'json',
      data: {
        tasks: {
          id: task_id,
          subtask_id: dbvalue
        }
      },
    }).done(function() {
      console.log("SUCCESS");
      $("#working_area").html("<%= escape_javascript(render(:partial => 'sub_tasks.js.erb', locals: {items: params[:w]} )) %>");
    });
  });
});
</script>

<% @days.each do |e| %>
    <a id="ID=1" class="testClick" data-dbvalue="<%= e.id %>"  data-wrkval="<%= params[:w] %>"><%= e.name %></a>
<% end %>

它将“ SUCCESS”记录在控制台中，并将#working_area div的当前内容替换为局部内容。

太棒了...

但是，当我单击下一个链接时，它会记录另一个SUCCESS消息，但是由于某种原因，它不会再次替换#working_area内容。

是否有人对每次单击链接时如何使它替换/刷新有任何想法？

更新-好的，我已经重新加载它，并且我已经意识到，这是因为在单击模式时我的部分已渲染，因此它是“在那时”修复的。

Answer 1

您应该这样使用on ：

$(document).on("click",".testClick",function (){
    ..code here...
});    

Answer 2

使用“开”事件。

更换

$（“。testClick”）。click（function（）{

与

$（“。testClick”）。off（'click'）。on（'click'，function（）{

首次替换内容后，还要确保#working_area仍然有效。