레일 + 자바 스크립트 : 페이지에 HTML을 업데이트 할 때, 아니 더 이상 기능

Question

) (UJS의 .change 바인딩 내가 가지고 UJS와 함께 부분 렌더링 작업,하지만 다음 트리거 형태의 마크 업을 업데이트하는 부분

을 onchange 액션을 실행하면이 새로 업데이트 된 마크 업에서 자바 스크립트가 더 이상 트리거되지 않습니다.

코드는 여기에서 한 번만 작동하고 더 이상 작동하지 않습니다.

은 내가 UJS가 아닌 요소, 첫 번째로드 (document.ready)에서 수행 된 결합을 생각하는 부분 업데이트

-> 새로운 마크 업이 돌아 오는에 동일한 작업을 바인딩하는 방법 아약스 요청에요? -> 문서가로드 될 때처럼 UJS 함수의 "바인딩"을 다시 트리거 할 수 있습니까? 추가 기능을 만들어야합니까?

표식 :

<form action="/loopview/1/show" data-remote="true" id="breadcrumb_form" method="post"> 
    <select class="auto_update"> 
    <option value="1970" selected="selected">test</option> 
    </select> 
</form> 

UJS :

I 호출되는 외부 함수를 작성하여 그것을 해결

$(document).ready(function() { 
    ... 
    $('select.auto_update').change(function(){ 
     ... 
     $(this).submit();  // never triggered on newly loaded markup 
    }); 
} 

Answer 1

또 다른 간단한 해결 방법은 이벤트 리스너 on 대신 change을 사용하는 것입니다.

그런 다음 JS 코드는 다음과 같다 :

$(document).ready(function() { 

    $('select.auto_update').on('change', (function(){ 
    ... 
    $(this).closest("form").submit();  // never triggered on newly loaded markup 
    }); 
}); 

두 변경 :

1. on이 change
2. 는 형태가 아니라 선택을 제출 교체.

이 방법으로 이벤트가 항상 생깁니다. ready에 대한 맞춤 기능을 작성하는 것이 번거롭지는 않습니다.

Answer 2

: 문서

각로드 될 때 한번

• 을 마크 업이 업데이트되는 시간

코드 :

$(document).ready(function() { 
    ... 
    bind_auto_update_action(); 
}); 



/* (Re)associate the correct event listeners to the markup. Is called at each refresh of the markup to (re)bind the listeners. */ 
function bind_auto_update_action() { 
    /* Auto update the url when changing the value of one of the select in the breadcrumbs */ 
    $('select.auto_update').change(function(){ 
     $('#breadcrumb_point_id').val($(this).val()); 
     $(this).submit(); 
     console.log("Auto update function "); 
    }); 

    /* Update the content of the main div with the returned markup from the serveur */ 
    $("#breadcrumb_form").bind('ajax:complete', function(status, data, xhr){ 
     $("#loopview_content").html(data.responseText); 
     bind_auto_update_action(); 
     console.log("Update of the loopview_content <div> due to ajax response (breadcrumb navigation)"); 
    }); 
}