Question

我知道这已被问及重新询问，但我无法指出它。

我有一个从部分

呈现表单的视图

.myform
  = render "someform"

这是表格

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

在控制器中没有做任何花哨的渲染，它只是渲染js视图，因为表单是使用remote: true提交的

所以它调用object.js.haml

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

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

麻烦的是，你的JS-heads会看到我要去的地方，它不再绑定到DOM，这意味着其他javascript事件没有触发，在这种情况下，typeahead（使用简单表单输入称为自动完成）。

那么，我如何重新渲染someform部分并确保新输入与js预先事件相关联？

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

1 个答案: