선택 상자에 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> 

이 내 자바 스크립트입니다 :

<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 요청에 의해 이벤트가 새로 고쳐질 수있는 자식 이벤트에 연결되어 있는지 확인할 수 있습니다. 'onChange가'/ '변화를 확인,

"onChange: "myFunction();" 

그렇지 않으면 : 당신이 세미콜론 누락하고 있기 때문에 작동하지 않습니다 의미 예 그렇지 않으면

# 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 
}); 

, 나는 당신의 기능을 생각한다 바인딩. 무엇이 '변화'를 구성합니까? 일부 사용자 상호 작용 이후에 조치가 수행되는 경우 '클릭'을 사용하는 것이 더 나을 수 있습니다.

희망이 도움이됩니다.