Question

我试图在使用.detach（）或.empty（）在rails中进行多次AJAX成功调用后分离表单但由于某种原因，表单会继续附加到之前添加的表单。我不知道如何摆脱它。

var evidenceScore = {
    init: function () {
      $(document).on("ajax:success", this.appendEvidence)
    },

    appendEvidence: function(event, data, status, xhr) {
        $('#evidence-form').detach()
        $('#evidence-form').append(data.evidence_list)
    }
  }

$(document).ready(function(){
  sideBar.toggle();
  evidenceScore.init();
})

在我的appendEvidence属性中，我尝试在.detach()上调用.empty()和$('#evidence-form')，但它不会删除。

有什么想法？

Answer 1

您是否尝试过$('#evidence-form').remove()？

Answer 2

解决

这里需要注意的重要事项是$（'证据形式'）。

关于Ajax的成功，我提交的表单可能看起来像这样。

<form>
 insert things in here.
</form

关于AJAX的成功我正在这样做：

$('#evidence-form').append(data.evidence_list)

我的html文件是什么？

<div class="evidence-form">
    <form accept-charset="UTF-8" action="/observations/3/domains/2/indicators/75/evidences/score" method="get">
       <inputname="utf8" type="hidden" value="✓">
    </form>
</div>

因此请致电

appendEvidence: function(event, data, status, xhr) {
        $('#evidence-form').remove()
        $('#evidence-form').append(data.evidence_list)
    }
  }

只会摆脱整个div：

<div class="evidence-form">
</div>

因此，<form></form>标签也不会在以后的继承中附加任何内容。

最终解决方案

var evidenceScore = {
       init: function () {
       $(document).on("ajax:success", this.appendEvidence)
    },

      appendEvidence: function(event, data, status, xhr) {
       $('.evidence-form').remove() //grab the form with an ID or Class
       $('#evidence-form').append(data.evidence_list)
    }
  }

$(document).ready(function(){
  sideBar.toggle();
  evidenceScore.init();
})

如何在多次AJAX成功调用（Rails）后删除以前附加的DOM元素

2 个答案: