ajax 게시 후 document.ready 실행

Question

나는 클릭 및 기타 메소드가 바인딩 된 여러 요소가있는 custom.js 파일이 있습니다. 전체 파일은 document.ready()에 캡슐화되어 모든 것이 작동합니다. 그러나 AJAX 게시물을 할 때 분명히 document.ready()는 현재 페이지에서 다시 발생하지 않습니다. 어쨌든 document.ready()를 다시 호출 할 수 있습니까? 아니면 명명 된 함수에서 모든 것을 내 create.js.erb라는 양식으로 호출해야합니까?

Answer 1

항상 모든 것을 하나의 함수 (loadfunction 또는 무언가)에 넣을 수 있으며 문서가로드 될 때 해당 함수를 호출하고 다시 아약스가로드 될 때 함수를 호출 할 수 있습니다. 해킹 된 솔루션이지만 충분히 잘 작동합니다.

그래서 다음 $(document).onready(function() {과 끝 브래킷 } 사이에 모든 것을 가지고 그리고 }로 끝나는 function OnloadFunction() {에 넣어. 그런 다음 $document.onready(OnloadFunction);

예를 넣어 : 당신이로 변신 것

$(document).ready(function() {alert("test");}); 

을 가지고 : 당신이 원할 때마다 그런 다음 OnloadFunction를 호출 할 수 있습니다

function OnloadFunction() 
{ 
    alert("test"); 
} 
$(document).ready(OnloadFunction); 

. 우리가 .query() 플러그인을 정의해야합니다

첫째 :

Answer 2

나는 성공적으로 다음과 같은 패턴을 사용했습니다.

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

우리는 다음 이벤트 "domupdated"우리의 정의에 또한 우리의 초기화 함수를 작성하고 "준비"이벤트에 바인딩합니다. 우리는 전체 문서하거나 업데이트 된 조각 중 하나의 요소를 찾을 수 .query()을 사용하는 init 함수 ... 우리가 DOM에 새로운 요소의 블록을 삽입 할 때마다 다음

// 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... 

    }); 

내 (같은 Ajax 요청이 완료되면) 우리는 다음 domupdated 이벤트를 트리거 매개 변수로 업데이트 된 DOM 조각을 통과 -과 같이 :

... 
var ajaxedDom = $(xhr.resultText).find('#message'); 
ajaxedDom.appendTo('#modal'); 

$(document).trigger('domupdated', [ajaxedDom]); 

이 나를 위해,이 설정 한 DOM을 INITING에서 모든 고통을합니다. 그것은 하나의 init 루틴 세트를 유지하고 재미있는 것에 초점을 맞출 수있게한다.

Answer 3

모든 아약스 호출 후에 트리거되는 이벤트가 있습니다. ajaxComplete이라고합니다.

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

 
$(document).ajaxComplete(function() { 
 
    AjaxInit() 
 
}); 
 

 
function AjaxInit() { 
 
    alert("test"); 
 
}

Answer 4

나는 다음과 같은 패턴을 만들었습니다. ;) 모든 코드가 파일 (ajax)의로드 된 부분 안에 있습니다. '성공', '완료'등을 사용하지 않습니다. jquery 아약스로드의 기능 확장.

먼저 모든 기능을 구현해야합니다. 예 : _autostart();

function _autostart() { 

    ... all code here .... 

} 

본문에서 우리는 아약스로드가 끝날 때 실행해야하는 모든 js 코드를 붙여 넣습니다.

그런 다음이 함수를 time 트리거로 실행하기 만하면됩니다. ;)

setTimeout("_autostart();",0000); 

그게 전부입니다. 끝난. :)

물론 우리는 ajax 후 html 코드의 모든 이벤트에 js 코드 함수를 사용할 수 있습니다. 예 : 'onchange', 'onclick'등 너무 효과가 있습니다. :)

Answer 5

나는 약간의 트릭을 사용했습니다 : 벤과 fotanus '답변을 결합

$(document).ajaxComplete(function() { 
    $(".log").text("Triggered ajaxComplete handler."); 
});