slideToggleはAJAXで動作しませんが、私は、単純なslideToggle機能を持っているコンテンツ

Question

をレンダリングajaxによってレンダリングされ、ページロード時にレンダリングされなかったので、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>