ajax post 후 document.ready 실행
저는 클릭과 다른 메소드가 결합된 여러 요소가 있는 custom.js 파일을 가지고 있습니다.전체 파일이 document.ready()로 캡슐화되어 모든 것이 작동합니다.그러나 AJAX post document.ready()를 수행하면 현재 페이지에 대해 다시는 실행되지 않습니다.document.ready()를 다시 실행할 수 있는 방법이 있습니까? 아니면 명명된 함수의 모든 것을 내 create.js.erb에서 호출하도록 해야 합니까?
항상 모든 것을 하나의 함수(load function 등의 이름)에 넣고 문서가 로드될 때와 ajax가 로드될 때 그 함수를 호출할 수 있습니다.비록 함께 해킹된 솔루션이지만 충분히 잘 작동할 것입니다.
그럼 그 사이에 있는 모든 것을$(document).onready(function () {
엔드 브라켓(end bracket)}
그리고 집어넣습니다.function OnloadFunction () {
로 끝맺음}
. 그럼 집어넣습니다.$document.onready(OnloadFunction);
예:당신은 가지고 있다
$(document).ready(function () {alert("test");});
다음으로 바뀝니다.
function OnloadFunction ()
{
alert("test");
}
$(document).ready(OnloadFunction);
그럼 전화해 보세요.OnloadFunction
당신이 원하면 언제든지
벤과 포타누스의 대답을 종합하여 다음과 같은 패턴을 만들었습니다.
$(document).ready(function () {
AjaxInit()
});
$(document).ajaxComplete(function () {
AjaxInit()
});
function AjaxInit() {
alert("test");
}
모든 아약스 호출 후 트리거되는 이벤트가 있습니다.그것은 ajax Complete라고 불립니다.
$( document ).ajaxComplete(function() {
$( ".log" ).text( "Triggered ajaxComplete handler." );
});
저는 다음과 같은 패턴을 성공적으로 사용했습니다.
먼저 .query() 플러그인을 정의해야 합니다.
// jQuery.fn.query() emulates the behavior of .querySelectorAll()
// by allowing a full/complex selector to be matched against
//a small slice of the dom.
$.fn.query = function ( selector ) {
var scopeElms = this,
scopeIsDoc = scopeElms.length === 1 && scopeElms.is('html') ,
// check for obviously simple selectors.... (needs more elegance)
isComplexSelector = /\s/.test( selector.replace(/\s*([|~*$\^!]?=|,)\s*/g, '$1') ),
elms;
if ( scopeIsDoc || isComplexSelector )
{
elms = $(selector);
if ( scopeElms[0] )
{
elms = elms.filter(function(){
var i = scopeElms.length;
while (i--) {
if ( scopeElms[i] === this || $.contains(scopeElms[i], this) )
{
return true;
}
}
return false;
});
}
}
else
{
elms = scopeElms.filter( selector )
.add( scopeElms.find(selector) );
}
return $(elms);
};
그런 다음 init 함수를 작성하여 "ready" 이벤트와 사용자 지정 "domupdate" 이벤트에 바인딩합니다.init 함수 내에서 우리가 사용하는.query()
전체 문서 또는 업데이트된 조각에서 요소를 찾으려면...
// Here we define our DOM initializations
$(document).bind('ready domupdated', function (e, updatedFragment) {
var root = $( updatedFragment || 'html' );
// Begin imaginary initialization routines
root.query('form').validate();
root.query('.sidebar .searchform input#search').autocomplete();
// etc...
});
그런 다음 새로운 요소의 블록을 DOM에 주입할 때마다(예: Ajax 요청이 완료되었을 때),domupdated
이벤트를 수행하고 업데이트된 DOM fragment를 매개 변수로 전달합니다.
...
var ajaxedDom = $(xhr.resultText).find('#message');
ajaxedDom.appendTo( '#modal' );
$(document).trigger('domupdated', [ajaxedDom]);
이 설정은 DOM을 시작함으로써 발생하는 모든 고통을 제거합니다.그것은 내가 한 세트의 init 루틴을 유지하고, 재미있는 것에 집중할 수 있게 해줍니다.
켄 맥의 대답에 약간의 왜곡이 있습니다.어떤 이유로든 문서에 중첩되지 않는 한 내 ax Complete는 실행되지 않을 것입니다.ready.안에 둥지를 틀고도 여전히 전화를 거는 것이 제게 효과가 있었습니다.
$(document).ready(function () {
AjaxInit();
$(document).ajaxComplete(function () {
AjaxInit()
});
});
function AjaxInit() {
alert("test");
}
제가 좀 속임수를 썼거든요.;) 모든 코드는 파일(jax)의 로드된 부분 안에 있습니다.저는 '성공', '완료' 등을 전혀 사용하지 않습니다.jquery ajax load의 확장 기능입니다.
우선 우리는 어떤 기능이든 만들어야 합니다.예를 들어 _autostart();
function _autostart() {
... all code here ....
}
본문에 우리가 ax load의 끝에서 실행해야 할 것을 모두 js 코드로 붙여넣을 것입니다.
그러면 타임 트리거로 이 기능을 실행합니다. ;)
setTimeout("_autostart();",0000);
그리고 그게 다에요.완료. :)
물론 우리는 ajax 이후 html code의 어떤 이벤트에서도 js code 기능을 사용할 수 있습니다.예를 들어 'on change', 'on click' 등입니다.그것도 일입니다.:)
제스, 켄 맥, 2005년 요크의 답변을 시도해 보았지만 아무 것도 소용이 없었습니다.이 된 user jquery의 user 이었습니다..trigger
. 그를 ⑤ 'ready' ⑥ 'ready' ⑦ 'ready'로 불러야 합니다..on
. 그러면 나중에 수동으로 이벤트를 트리거할 수 있습니다..trigger에 대해서는 문서를 참조하십시오.
$(document).on('ready myFunction',function(){
(blah blah)
Rails.ajax({
(blah blah)
success: function(result) {
$(document).trigger('myFunction');
}
});
});
$(document).trigger('myFunction');
지금이다myFunction
문서 준비 및 성공적인 ajax 호출에서 모두 트리거됩니다.함수를 트리거하는 또 다른 방법은 다음을 사용하는 것입니다.
$(document).trigger('myFunction');
페이지의 어느 곳이든, 심지어 콘솔에서도 가능합니다.이 점을 잘 알고, 보안에 대해 생각해보세요.
언급URL : https://stackoverflow.com/questions/5610321/execute-document-ready-after-ajax-post
'sourcecode' 카테고리의 다른 글
azure mariadb 서버에 키클로크 연결 (0) | 2023.09.15 |
---|---|
루프 내에서 동적 변수 이름을 만들려면 어떻게 해야 합니까? (0) | 2023.09.15 |
How to see pending AJAX requests with Chrome (0) | 2023.09.10 |
오라클 10g small Blob 또는 Clob이 인라인으로 저장되지 않습니까? (0) | 2023.09.10 |
jquery 중첩 ajax 호출 서식 지정 (0) | 2023.09.10 |