Question

所以在我的HTML页面中我有一些根据AJAX调用动态生成的标记。这是我目前拥有的（最小代码）：

<div class='container'></div>
<script>
  // AJAX call. On success --> (<div class='content'></div>) within ".container" is generated
  $('.content').slideToggle(0);  // Not working
</script>

现在我生成了div，但是我希望所有.content div在加载时首先切换。任何想法如何实现这个？

请注意，根据其他事件，AJAX呼叫会被多次触发。在AJAX调用的成功函数中包含$('.content').slideToggle(0)会导致slideToggle反向运行。

Answer 1

当ajax请求完成并且已生成html元素时，你应该调用slideToggle方法，imho。

$.ajax({ url: "some_url",
    success: function(){
       // add html element in DOM
       $('.content').slideToggle(0):
    }});

Answer 2

将jQuery方法转换为委托方法

你似乎过分思考这个问题。你所拥有的只是一组以不同于你预期的顺序发生的操作。请记住，AJAX是异步。所以当你这样做时：

$.ajax({
  url: "your_url.ext",
  success: function (response) {
    // add the response to the DOM
  }
});
$('.content').slideToggle(0);

slideToggle实际上在success函数中之前发生了。由于您希望定位success函数中添加的元素，只需将该操作移动到您希望它发生的位置：

$.ajax({ url: "your_url.ext", success: function (response) { // add the response to the DOM $('.content').slideToggle(0); } });

此外，如果此AJAX操作多次发生，并且您希望仅该调用返回的元素（不是先前添加到DOM中的元素），那么您需要进一步识别jQuery选择器中的目标元素。显然$('.content')将定位整个DOM中的每个匹配元素。因此，您需要更加精确地定位您想要的元素。

如何做到这一点取决于您的HTML结构以及AJAX调用实际返回的内容以及您正在使用它做什么。例如，如果您创建一个包含元素并将返回的元素添加到包含该元素的元素，那么您可以在jQuery选择中包含该元素。

这可以通过多种方式完成，包括父/子选择器：

$('#some_element .content').slideToggle(0);

或使用.find()：

$(someElement).find('.content').slideToggle(0);

或将元素上下文传递给jQuery：

$('.content', someElement).slideToggle(0);

等

关键是，如果您需要更具体地定位元素，那么您可以使用jQuery更具体地定位元素。

将jQuery方法转换为委托方法

2 个答案: