Question

我有一个带有以下coffeescript jquery代码的应用程序来执行一些ajax调用：

  $('#records-filter-date').submit ->
$.get(@.action, $(@).serialize(), null,'script')
return false

$('#records-delete').submit ->
 $.post(@.action, $(@).serialize(), (data)->
  $('.check-for-delete:checked').parent().parent().hide(600,'swing')
  $('#alert-div').html("<div class='alert alert-success '><button class='close' data-dismiss='alert' type='button'>x</button><div id='flash_notice'>"+data+ " record(s) successfully deleted!</div></div>")
  $.get('#records-filter-date'.action, $('#records-filter-date').serialize(), null,'script')
,'text')
return false

现在页面列出了某些记录。第一个电话是通过ajax提交搜索字段。第二个是删除选定的记录（使用复选框）。现在我可以删除记录并重定向到列出记录的操作，但搜索参数将丢失（如果用户在删除记录之前过滤了记录），他们将不得不再次过滤记录。

所以我所做的就是在删除被称为成功之后我称之为在搜索字段中提交日期并考虑更新记录。

但......当没有搜索参数时（没有搜索时）删除工作正常。但是当我进行搜索然后我进行删除时...请求将作为普通的http请求进行处理..

无论如何都要保持搜索参数？或者我需要做些什么来解决这个问题？

编辑：提交要删除的记录的表单位于搜索调用更新的div中。是否可以在更新div时破坏与ajax调用的绑定？

Answer 1

提交要删除的记录的表单位于搜索调用更新的div中。是否可以在更新div时破坏与ajax调用的绑定？

是的，这就是问题所在。当您替换元素的HTML内容时，其中的所有现有元素都将从DOM中删除，其关联的数据和事件处理程序将随之使用。即使您用相同的内容替换它，结果元素也是新元素。

您需要使用event delegation。这是代码的常规jQuery版本：

$(document).on('submit', '#records-delete', function(e) {
    // your $.post() code here
});

理想情况下，不是document，而是使用在层次结构中更接近动态元素的静态元素（此处#records-delete形式将是动态元素）。在您的情况下，这将是包含该表单的<div>的选择器。

Ajax .post在.get（）之后无法正常工作

1 个答案: