用 Ajax 加载的内容失去了风格答案

【问题标题】：Contents loaded with Ajax lose style用 Ajax 加载的内容失去了风格
【发布时间】：2012-11-28 01:40:48
【问题描述】：

我创建了一个加载 10 个元素的页面，并在页面底部放置了经典按钮“加载更多”以加载更多 10 个元素。

问题在于 jQuery，由 :nth-child() 属性给出的样式不适用于接下来的 10 个元素等等。

有没有办法解决这个问题？

例如：

文件 main.js

$("#main_content > p:nth-child(3n+2)").addClass("small-product-wrapper");
$("#main_content > p:nth-child(3n+3)").addClass("small-product-wrapper");

文件example.php

<script type="text/javascript">
  $('#more_button').click(function(){

    loaded_messages += 10;

    $('#loading').ajaxSend(function() {
      $("#loading").stop(true,true).fadeIn().delay(200).fadeOut();
    });

    var dati = "twitterpagination/get_messages/" + loaded_messages;
    $.ajax({
      url:'twitterpagination/get_messages/' + loaded_messages,
      type: 'get',
      data: dati,
      cache: false,
      success: function() {
    $.get(dati, function(data){
      $("#main_content").append(data);
    });

    if(loaded_messages >= num_messages - 10) {
      $("#more_button").hide();
    }
      },
      error: function() {
    // do nothing 
      }
    });
    return false;
  });
</script>

<div id="main">
  <?php
  foreach($latest_messages as $message) {
    echo '<p>'.$message->message .'</p>';
  }
  ?>
  <div id="more_button">more</div>
</div>

Ajax url 加载的文件：

<?php
  foreach($latest_messages as $message) {
    echo '<p>'.$message->message .'</p>';
  }
?>

【问题讨论】：

标签： php sql ajax jquery

【解决方案1】：

在ajax加载的文件中：

<?php
  foreach($latest_messages as $message) {
    echo '<p class="small-product-wrapper">'.$message->message .'</p>';
  }
?>

给返回的P标签添加样式

【讨论】：

【解决方案2】：

当您使用 Ajax 加载新内容时，自动为其分配样式的唯一方法是给它一个类并在 css 中定义该类样式。

如果不这样做，则必须在ajax调用的回调函数中重新分配样式。

【讨论】：

【解决方案3】：

在从 AJAX 添加新的 html 后，您需要立即重新运行这 2 行 jQuery。

success: function() {
    $.get(dati, function(data){

        $("#main_content").append(data);
        // here
        $("#main_content > p:nth-child(3n+2)").addClass("small-product-wrapper");
        $("#main_content > p:nth-child(3n+3)").addClass("small-product-wrapper");
    });
}

这是因为这些原始行仅在页面加载时运行一次。

【讨论】：