페이지 새로 고침 - JavaScript

Question

JavaScript가있는 Rails 응용 프로그램이 있으며 문서가로드 될 때 작동합니다. 그러나 새 페이지로 갈 때 JavaScript를 다시로드해야합니다. 페이지를 다시로드하지 않고도이 작업을 수행 할 수 있습니까, 아니면 페이지를 새로 고침해야합니까?

나는 현재 예에서, 사용이 동적으로 생성 된 HTML 이벤트를 위임이

var main = function() { 

var toggleProductImage = function() { 
    $(this).children().each(function() { 
     this.classList.toggle('hide'); 
    }) 
} 

$('.ind a').each(function() { 
    $(this).mouseenter(toggleProductImage); 
    $(this).mouseleave(toggleProductImage); 
}); 
}; 

Answer 1

처럼 쓴 jQuery 코드를 가지고있다. 아약스 요청. 난 당신의 DOM 트리를 알고하지 않는 한 나는 document를 사용하고, 정적 가장 가까운 부모를 찾기 :이 document에 이벤트를 바인딩하고 요소가 .ind a 목표와 일치하는 경우에만 처리기를 발사합니다

$(document).on('mouseenter', '.ind a', toggleProductImage) 
      .on('mouseleave', '.ind a', toggleProductImage); 

function toggleProductImage() { 
    $(this).children().toggleClass('hide'); 
} 

.

보다 약 .on(events [, selector ] [, data ], handler)

events 유형 참조 : PlainObject
문자열 키가 하나 이상의 공백으로 구분 된 이벤트 유형 및 옵션 네임 스페이스를 대표하는 객체를, 그 값은 핸들러 함수가 호출 될 대표 이벤트 (들).

selector 유형 : 문자열
처리기를 호출 할 선택한 요소의 자손을 필터링하는 선택기 문자열입니다. selector가 null이거나 생략되면 핸들러는 선택된 요소에 도달하면 항상 호출됩니다.

는 나는 또한 자바 스크립트를 다시로드하면 당신이 원하는 것을 생각하지 않는다

Answer 2

더 jQuery를 같은 확인하기 위해 toggleProductImage을 변경했습니다. js 파일을 가져 와서 다시 파싱 할 수는 있지만 이전에로드 한 파일의 개체는 계속 남아 있습니다. 생성 한 모든 것을 추적하고 모든 이벤트 핸들러를 제거한 다음 js를 다시로드해야합니다.

대신 부모 요소에 mouseenter/mouseleave를 첨부하고 필터를 처리해야한다고 생각합니다.

$('.ind').on('mouseenter', 'a', function(e) toggleProductImage); 
$('.ind').on('mouseleave', 'a', function(e) toggleProductImage);