AJAX jQuery UI 탭 (숨겨진 DOM 요소)에 숨겨진 div로드

Question

AJAX를 통해 jQuery UI 탭에로드되는 내용을 조작하려고했습니다. 상상할 수있는 것처럼,이 요소는 "미래"DOM 요소이며 일반 $ (". someClass") 함수로 조작되지 않습니다.

jQuery 1.7+를 사용하여 이벤트 처리가 더 이상 사용되지 않으며 new .on() 메소드로 대체되었으므로 .live()를 사용하여 읽었습니다.

내 문제는 AJAX 탭에서로드 할 때 숨기고 싶은 div는 초기 DOM로드 후에 조작되어야하며 처음에는 클릭 이벤트에 바인딩되지 않는다는 것입니다.

현재 $()로 싸인 내 기능은 다음과 같습니다.

클릭 핸들러를 사용하는 링크에 올바른 구문이 있다고 생각하지만로드 할 때 "숨겨진()"내 "숨겨진 스토리"div에 올바른 방법을 모르겠습니다.

또한 함수 자체가 전체 $()로 묶어서는 안됩니다.

도움이나 조언을 주시면 감사하겠습니다.

$(function(){ 
    // this .hiddenStory div below is what I want to hide on AJAX load 
    // need syntax and/or new methods for writing this function 
$(".hiddenStory").hide(); 

    // this is a function that allows me to toggle a "read more/read less" area 
    // on the "hiddenStory" div 
$(".showMoreOrLess").on('click', (function() { 
if (this.className.indexOf('clicked') != -1) { 
    $(this).removeClass('clicked'); 
    $(this).prev().slideUp(500); 
    $(this).html("Read More" + "<span class='moreUiIcon'></span>"); 
    } 
    else { 
    $(this).addClass('clicked'); 
    $(this).prev().slideDown(500); 
    $(this).html("See Less" + "<span class='lessUiIcon'></span>"); 
    }  
})); 
}); 

// prevents default link behavior 
// on BBQ history stated tab panes with  
// "showMoreOrLess" links 
$('.showMoreOrLess').click(function (event) 
{ 
event.preventDefault(); 
// here you can also do all sort of things 
}); 
// /prevents default behavior on "showMoreOrLess" links 

Answer 1

당신은 CSS를 통해 display: none을 설정하고 요소의 내용을 보여주고 싶었다 때를 무시할 수 있을까요? 또 다른 옵션은 엘리먼트를 채우는 AJAX로드에서 callback에`$ (". hiddenStory"). hide()를 추가하는 것입니다. 예를 들면 : 당신이 .load 방법을 사용하지 않는 경우

$(".hiddenStory").load("http://myurl.com", function(){ 
     $(".hiddenStory").hide(); 
    } 
); 

, 당신은 vansimke 헤이 (... $ 아약스를 사용하는 경우, 예를 들어 성공)로 묶어 다시