Ruby on Rails渲染部分無法從主窗體視圖執行javascript

Question

我嘗試從主視圖表單，從渲染的部分執行JavaScript，方法是單擊渲染的部分中的復選框，但該JavaScript無法執行。 僅當我在主視圖中復制部分內容時，它才會執行。 我已經搜索了該站點，但是找不到答案。 這就是我所擁有的，例如：

app / views / people / _main_form.html.erb

<script>
  view something in partal
  $('people_visible_by_default').click(function(){
    alert("Can you see me");
  });
</script>

<%= bootstrap_nested_form_for @people, html: { class: 'form-horizontal', id: 'people_edit_form' } do |f| %>
   <%=  render partial: 'form_partial', locals: { f: f } %>
<% end %>

要在app / views / people / _form_partial.html.erb中執行的復選框

<%= f.check_box :visible_by_default, data: { preview_type: 'none' } %>

clicking on the visible_by_default checkbox doesn't show the alert as I expected.  How do I get it to execute when it is in the main_form.html.erb

Answer 1

我猜您正在使用復選框的ID（“ people_visible_by_default”）作為jQuery中的選擇器。 但是您忘了在其前面附加“＃”。

因此，嘗試

$('#people_visible_by_default').click(function(){
  //your code
});

要么

$('#your_form_ID').on('click', '#people_visible_by_default', function(){
  //your code
});

Answer 2

首先，加載主頁時應使用選擇器。 加載主頁時，Js會迭代dom元素。 因此，如果您通過事件渲染某些東西（頁面加載開始時不存在的東西），則沒有js處理程序。 但是您可以使用呈現部分的父元素的選擇器。 例如：

view.html.slim ：

.parent_class
  = bootstrap_nested_form_for @people, html: { class: 'form-horizontal', id: 'people_edit_form' } do |f| 
   =  render partial: 'form_partial', locals: { f: f } 

view.js.coffee

$('.parent_class').on 'click', '#people_visible_by_default', (e) ->
  do something 

嘗試這個。 希望對您有幫助