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 看不到它。

我尝试使用 ajax完成：

$(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>

slideToggle 不适用于 AJAX 呈现的内容

slideToggle won't work on AJAX rendered content

ajax

jquery

dom

slidetoggle