slideToggle 내가있어 내용

Question

간단한 slideToggle 기능 렌더링 :

$('.toggle-within').click(function() { 
     $('.toggle-this', this).slideToggle('fast'); 
    }); 

을하고, HTML과 같은 것이다 :

<div class="toggle-within"> 
    CLICK FOR DETAILS 
    <p class="toggle-this"> 
    DETAILED TEXT 
    </p> 
</div> 

하지만 문제는 때때로이 HTML이 있다는 것이다 아약스에 의해 렌더링되고 그것은 페이지로드에서 렌더링되지 않았기 때문에 jQuery는 그것을 볼 수 없다.

나는 ajaxComplete를 사용하여 시도 :

이

$(document).ajaxComplete(function() { 
    $('.toggle-within').click(function() { 
     $('.toggle-this', this).slideToggle('fast'); 
    }); 
}); 

하지만 여전히 아무것도 ....

Answer 1

당신은 확실히 delegated event listeners를 사용하지 않고 Ajax 호출 한 후 무엇을 걱정해서는 안됩니다. 귀하의 접근 방식은 새로운 요소 만 대상으로하고 이전 요소를 모두 대상으로하지 않기 때문에 모든 AJAX 호출 후에 청취자가 쌓일 것입니다. 여기에 위임 리스너 사용하는 방법은 다음과 같습니다

$('body').on('click', '.toggle-within', function() { 
    $('.toggle-this', this).slideToggle('fast'); 
}); 

---

라이브를보십시오 :

$('body').on('click', '.toggle-within', function() { 
 
    $('.toggle-this', this).slideToggle('fast'); 
 
}); 
 

 
function add(){ 
 
    var content = "<div class=\"toggle-within\">"+ 
 
    "CLICK FOR DETAILS"+ 
 
    "<p class=\"toggle-this\">"+ 
 
    "DETAILED TEXT FROM AJAX"+ 
 
    "</p>"+ 
 
"</div>" 
 
    document.body.innerHTML += content; 
 
}

.toggle-this {display: none} 
 
.toggle-within:hover {cursor: pointer; color: #aaa}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button onclick="add()">Simulate AJAX</button> 
 
<div class="toggle-within"> 
 
    CLICK FOR DETAILS 
 
    <p class="toggle-this"> 
 
    DETAILED TEXT 
 
    </p> 
 
</div>