Rails：在表单提交并绑定到 dom 后重新渲染部分

Question

我知道这个问题已经被问了又问了，但我就是无法确定。

我有一个视图，它从部分呈现表单

.myform
  = render "someform"

这是表格

= simple_form @object, remote: true do |f|
  = f.input :field1
  = f.input :name, as: :autocomplete
  = f.submit

不在控制器中进行任何花哨的渲染，它只是在使用 remote: true

提交表单时渲染 js 视图

所以它调用object.js.haml

:plain
  $("form.new_object").html("#{escape_javascript(render(:partial => '/objects/someform'))}");

本质上，我只是用 new 对象替换表单。

麻烦的是，你们 JS-heads 会明白我要用这个做什么，它不再绑定到 DOM，这意味着其他 javascript 事件没有触发，在在这种情况下，提前输入（使用称为自动完成的简单表单输入）。

那么，我怎样才能重新呈现 someform 部分并确保新输入与 js typeahead 事件相关联？

Answer 1

在这个疯狂的 POST ajax 世界中处理绑定事件处理程序的一种方法是使用委托事件。

整个想法不是将处理程序附加到委托给容器甚至文档本身的每个小元素上。

$('#add').click(function(){
  $("#playground").append("<button>Test me too!</button>")
});

// This will only fire when you click the button that was present
// when the handlers where bound
$("#playground button").click(function(){
  console.log("I'm bound to an element!");
});

// This trickles down to every element that matches the selector
$("#playground").on('click', 'button', function(){
  console.log("I'm delegated!");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="playground">
  <button>Test</button>
</div>

<button id="add">Add a new button</button>

但是由于 typeahead 不允许您以这种方式委托，您可以做的是在将元素附加到 DOM 之前附加 typeahead 处理程序。

var obj = $("#{escape_javascript(render(:partial => '/objects/someform'))}");
obj.find('.typeahead').typeahead({
 // ...
});

$("form.new_object");

Rails：在表单提交并绑定到 dom 后重新渲染部分

Rails: Re-render partial after form submit and bind to dom

javascript

ruby-on-rails

dom

partials

ujs