如何在Ruby on Rails中使用带有form.select的jquery .click()方法？

Question

我有一个带有选择输入的表单，名为units_system，可以是公制的也可以是英制的。

<%= form.select :units_system, [['metrical', id: 'metrical'], ['imperial', id: :imperial]], {prompt: 'Select units system'}, {class: "form-control", id: :item_units_system}%>

它正在生成html

<select class="form-control" id="lot_units_system" name="lot[units_system]"><option value="">Select units system</option>
<option id="metrical" value="metrical">metrical</option>
<option id="imperial" value="imperial">imperial</option></select>

根据我的选择，我想在<div id=”cargo_form”></div>中渲染不同的部分

如果我点击id=“METRICAL”，我想在<div id=”cargo_form”></div>中看到文本“METRICAL”。

所以我在我的new.js.erb下一个jquery代码中写道：

$('#metrical').click(function(e) {
    e.preventDefault();
    $('#cargo_form').html('METRICAL');
});

但是什么都不会发生。我在<div id=”cargo_form”></div>中看不到任何结果

我做错了什么？感谢您的帮助！

Answer 1

您希望将代码放入您的webpack application.js或assets管道中。

$(document).on('click', '#metrical', function(e) {
  e.preventDefault();
  $('#cargo_form').html('METRICAL');
});

服务器端的问题--这基本上是Rails、为JS发送XHR请求和呈现js.erb视图的组合，它基本上只是用服务器端生成的字符串替换页面中的内容。这使您可以在前端重用服务器端模板。

它们通常如下所示：

document.querySelector('#someElement')
        .innerHTML = "<%= j(render 'something') %>";

当Rails UJS将javascript响应弹出到脚本标记中时，这实际上只是替换了页面上的内容。

当您只是添加一个简单的事件处理程序时，根本不需要SSC。