選択ボックスに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ファイルで

、またはスクリプトtags-方：

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

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

イベントリスナー「オン」でも要素クラス/ 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」/「の変化を確認しますバインディング。何が「変革」を構成しますか？ユーザーが操作した後でアクションを実行する場合は、「クリック」を使用する方が良いかもしれません。

これが役に立ちます。