Рельсы: Повторно отрезать часть после отправки формы и привязать к dom

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-головки увидят, куда я иду, это больше не привязано к DOM, что означает, что другие события javascript не срабатывают, в этом случае typeahead (который использует простой ввод формы, называемый автозаполнением).

Итак, как можно переопределить someform и убедиться, что новые входные данные привязаны к событиям ja 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>

Но поскольку машинописный не позволяет делегировать таким образом, что вы можете сделать, это присоединить обработчик машинописный перед подключением элементов в DOM.

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

$("form.new_object");