application.js中定义的函数不起作用

Question

我正在开发Rails6应用程序，并试图在我的应用程序中添加一些Javascript功能。我使用的代码是在非Rails模板上工作的，但当我将相同的代码放入Rails 6应用程序.js文件夹时，Javascript函数就不起作用了。

application.js
function hideButtin(){
var element = document.getElementById("hide");
element.style.display = 'none';
}
header.html.erb
<%= link_to "OWNER SIGN UP", signup_path, class: "button", onclick: "hideButtin()" %>
_form.html.erb
<div id="hide">
<%= f.check_box :owner %>
<%= f.label :owner %>
</div>

Answer 1

是的，函数在Rails6中的工作方式与此不同，您需要将其添加到window范围中

function hideButtin(){
var element = document.getElementById("hide");
element.style.display = 'none';
}
window.hideButtin = hideButtin;

试试看。

Answer 2

为什么不直接编写一个真正的事件侦听器而不使用onclick呢？

document.addEventHandler('addEventListener', 'click', function(e){
var other_element = document.getElementById("hide");
if (e.target.matches('.hide_on_click') && other_element) {
other_element.style.display = 'none';
}
});

---

<%= link_to "OWNER SIGN UP", signup_path, class: "button hide_on_click" %>

它不混合内容和行为，也不需要创建全局。如果不想对隐藏的元素的id进行硬编码，只需添加一个带有目标的数据属性即可。