的slideToggle將無法在AJAX工作呈現的內容

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由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>