在选择框中放置onChange事件

Question

我试图在选择框中放置一个onchange事件，但是由于某些奇怪的原因，它不起作用。 这是我的选择框：

  <%= f.label :Tipe, "Tipe:", class: "control-label col-md-1"  %>
    <div class="col-md-3">
     <%= f.select :Tipe, ['Mont','Vol'],onChange: "myFunction()", class: "form-control"%>
    </div>

这是我的javascript：

<script>
function myFunction() {
  alert( "Handler" );
}
</script>

Answer 1

内联javascript被认为是不好的做法，因为这样的原因很难调试。 也许您应该尝试：

在页面js文件或脚本标签中-

var myFunction = function(){
  // do whatever
}

$('.form-control').on('change', function(){
    myFunction();
});

“ on”事件侦听器允许将任何事件甚至绑定到元素类/ id。 更好的是，通过绑定到父元素的id，可以确保事件与子事件保持联系，而子事件可能会被ajax请求不时刷新。 例如

# parent html.erb file
<div id="container">
  <%= render 'form' %> 
</div>

# inside form partial
<%= f.label :Tipe, "Tipe:", class: "control-label col-md-1"  %>
<div class="col-md-3">
  <%= f.select :Tipe, 
    ['Mont','Vol'],
    onChange: "myFunction()", 
    class: "form-control"
  %>
</div>

# then in JS
$('#container').on('change', '.form-control', function(){
  //do something
});

否则，我认为您的功能无法正常工作，因为您缺少分号：

"onChange: "myFunction();"

如果没有，请检查“ onChange” /“ change”绑定。 什么是“变更”？ 如果要在某些用户交互之后执行某项操作，则最好使用“单击”。

希望这可以帮助。