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>

slideToggle不会处理AJAX渲染内容

1 个答案: