AJAX 요청 후 Javascript 파일 다시 로드
요청 후 생성된 새 요소는 myjQuery 코드의 이벤트 처리기에서 인식되지 않습니다.
이러한 이벤트를 다시 등록하기 위해 파일을 다시 로드하는 방법이 있습니까?
Ajax 요청 결과로 대체된 요소에 대해 등록한 이벤트가 실행되지 않는다는 뜻입니까?
사용하다.live()이벤트 핸들러를 교체할 때 삭제되는 이벤트 핸들러의 처음 결과가 아니라 실렉터와 일치하는 요소(Ajax 결과에서 생성된 새 DOM 요소 포함)에 대해 이벤트를 등록하려면 http://api.jquery.com/live/) 를 참조하십시오.
예를 들어 교체
$('div.someClass').click(function(e){
//do stuff
});
와 함께
$('div.someClass').live('click', function(e){
//do stuff
});
중요:
사용을 권장하는 동안.live()구문이 유사하기 때문에 이것은 명확성을 위한 것입니다..bind()사용해야 합니다..on()가능하면.중요한 정보는 @jbaby의 댓글 링크를 참조하십시오.
이 질문은 페이지 로드 후 생성된 DOM 요소의 바인딩 이벤트 처리기에 대한 것입니다.예를 들어, 요청 Ajax 후에 새 파일을 생성하는 경우<div>차단하고 onClick 이벤트를 캡처하려고 합니다.
//This will work for element that are present at the page loading
$('div.someClass').click(function(e){
//do stuff
});
// This will work for dynamically created element but is deprecated since jquery 1.7
$('div.someClass').live('click', function(e){
//do stuff
});
// This will work for dynamically created element
$('body').on('click', 'div.someClass', function(e){
//do stuff
});
설명서는 http://api.jquery.com/on/ 에서 찾을 수 있습니다.
이 코드는 나에게 완벽하게 작동합니다.
$("head script").each(function(){
var oldScript = this.getAttribute("src");
$(this).remove();
var newScript;
newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = oldScript;
document.getElementsByTagName("head")[0].appendChild(newScript);
});
이전 스크립트 태그를 제거하고 동일한 src로 새 스크립트 태그를 만듭니다(재로드).
웹 사이트 성능을 높이고 총 파일 크기를 줄이려면 필요할 때 JavaScript(.js) 파일을 로드하는 것이 좋습니다.jQuery에서 $.getScript 함수를 사용하여 런타임 또는 요청 시 JavaScript 파일을 로드할 수 있습니다.
예를들면,
$("#load").click(function(){
$.getScript('helloworld.js', function() {
$("#content").html('Javascript is loaded successful!');
});
});
ID가 "load"인 버튼을 클릭하면 "helloworld.js" JavaScript 파일이 동적으로 로드됩니다.
직접 해보세요. 이 예에서는 로드 버튼을 클릭하면 런타임에 "sayhello()" 함수가 포함된 "js-example/helloworld.js"가 로드됩니다.
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
</head>
<body>
<h1>Load Javascript dynamically with jQuery</h1>
<div id="content"></div>
<br/>
<button id="load">Load JavaScript</button>
<button id="sayHello">Say Hello</button>
<script type="text/javascript">
$("#load").click(function(){
$.getScript('js-example/helloworld.js', function() {
$("#content").html('
Javascript is loaded successful! sayHello() function is loaded!
');
});
});
$("#sayHello").click(function(){
sayHello();
});
</script>
</body>
</html>
요청 콜백에서 새로 추가되거나 생성된 블록에 작용하는 함수를 호출합니다.
$.ajax({
success: function(data) {
$('body').append(data);
//do your javascript here to act on new blocks
}
});
이 문제를 해결하는 간단한 방법
$(document).ready(function(){
$('body').on('click','.someClass',function(){
//do your javascript here..
});
});
클릭 핸들러를 본체에 부착하여 처음부터 손상되지 않도록 할 수도 있습니다.
$('body').on('click', 'a', function(event) {
event.preventDefault();
event.stopPropagation();
// some stuff
})
var scripts = document.getElementsByTagName("script");
for (var i=0;i<scripts.length;i++) {
if (scripts[i].src)
if(scripts[i].src.indexOf('nameofyourfile') > -1 )
var yourfile = scripts[i].src;
}
jQuery.get(yourfile, function(data){
if(data){
try {
eval(data);
} catch (e) {
alert(e.message);
}
}
});
Javascript 파일을 로드하기 위해 loadscript 플러그인을 시도할 수 있습니다.
forexample
$("#load").click(function(){
$.loadScript('path/example.js');
});
or
$.ajax({
success: function(data) {
$.loadScript('path/example.js');
}
});http://marcbuils.github.io/jquery.loadscript/
jQuery에서 인식되지 않는다는 것은 무슨 뜻입니까?
jQuery는 사용자가 요청을 할 때마다 DOM을 사용하므로 요청이 표시되어야 합니다.그러나 첨부된 이벤트는 그렇지 않습니다.
정확히 보이지 않는 것은 무엇입니까?
추신: JavaScript를 다시 로드하는 것은 가능하지만 매우 권장되지 않습니다!
언급URL : https://stackoverflow.com/questions/8594408/reload-javascript-file-after-an-ajax-request
'programing' 카테고리의 다른 글
| 분할 함수를 사용하지 않고 버전 번호 비교 (0) | 2023.08.22 |
|---|---|
| Angular2에서 구독을 취소하는 방법 (0) | 2023.08.22 |
| 크롬 브라우저에서 XHR 디버깅 (0) | 2023.08.22 |
| PowerShell에서 두 문자열 개체의 내용을 비교하는 방법 (0) | 2023.08.22 |
| Jquery 특정 인덱스의 테이블에 새 행 삽입 (0) | 2023.08.22 |