AJAX가 추가 한 요소에 대한 작업 수행

Question

라이트 박스 플러그인을 사용하여 라이트 박스가있는 페이지가 있습니다. 나는 라이트 박스로 전환 할 요소는 간단하게 다음과 같이 선택 및 변경됩니다

 
$(".lightbox").find("a").live('click', function(e) 
{ 
    e.preventDefault(); 

    $(".lightbox").find("a").fancybox({ 
     'transitionIn' : 'elastic', 
     'transitionOut' : 'elastic' 
    }); 
}); 

나는 그것이 가장 깨끗한 방법이 아니다 알고 있지만, 지금은 작동합니다. 내 진짜 질문은, 어떻게 AJAX에 의해 페이지에 추가 된 요소에 $(".lightbox").fancybox(...)을 실행할 수 있습니까? .fancybox()을 AJAX 호출의 success: 부분에 넣을 수는 있지만, 나는 "더럽고 잊어라"해결책을 찾고 있습니다. 모든 미래 요소에 적용 할 수있는 코드 한 장. .live()은 이벤트에 바인딩해야한다는 것 외에는 여기에 완벽합니다. 나는 심지어 여기서도 존재하지 않는 create이라고 생각합니다.

그래서 지금은 어디서나 많은 코드를 넣지 않아도 AJAX에 의해 페이지에 추가 된 요소에 대한 함수를 실행할 수 있습니까?

감사합니다,

제임스

Answer 1

은 그냥 jQuery를 아약스 호출 위에 추상화의 또 다른 레이어를 추가합니다. 이 레이어는 ajax를 호출하고 결과를 스캔하여 필요에 따라 라이트 박스를 추가합니다. 여기에 내가 마음에 무엇을 가지고 있습니다 : 어쩌면 같은

1

function lightBoxAjaxRequest(requestObj) { 
    if (requestObj.success) { 
     var requestObjCopy = $.clone(requestObj); // clone request object 

     requestObjCopy.success = function add$lightbox$to$response(html) { 
      // Add "html" to the page... 
      // Call lightbox code here, on newly added HTML 
      requestObj.success(html); // Trigger original success handler 
     }; 

     $.ajax(requestObjCopy); 
    } 
    else { 
     $.ajax(requestObj); 
    } 
}; 

뭔가? 나는 그것이 실제로 얼마나 잘 작동하는지 모른다. 뭔가가 DOM에 추가 된 후에도 항상 일부 기능을 실행하려고하는 것처럼 보입니다.


또는

또한 당신을 위해 작업을 할 innerHTML 래퍼를 만들 수

:

2

function addHtmlToDomWithLightbox(domElement, html) { 
    if (typeof domElement === "string") { 
     domElement = $("#" + domElement); 
    } 

    domElement.html(html); 

    // Add lightbox here 
    domElement.find("a").fancyBox({}); 
}; 

당신은 모두에 addHtmlToDomWithLightbox를 부를 것이다 당신의 성공 함수 (html을 jQuery html metho를 통해 추가하는 대신 디). 메쏘드 이름은 길고 장황하다. 여러분은 그것을 바꿀 수 있고, 원하는 곳에 메쏘드를 놓을 수있다. 방금 설명의 목적으로 장황하게 만들었습니다.