CSS样式未正确应用于由AJAX动态加载的html元素 [英] CSS styles are not being applied properly to html elements loaded dynamically by AJAX

问题描述

我有一个情况，我最初在html中显示一些内容。

我在元素上应用了响应式样式和javascript。

现在我添加了一个ajax调用动态加载数据，动态数据的样式相同，这些样式适用于initail HTML元素。



数据被成功检索但是样式没有应用它，因此结构搞砸了。欢迎任何帮助。



我的头版代码：

I have a situation here where i show initially some content in html.
I have applied responsive styles and javascript on the elements.
Now i have added an ajax call to load data at the end dynamically and for the dynamic data the styles are same which are applied for initail HTML elements.

The data is being retrieved sucessfully but the styles are not applied to it and thus the structure is messed up. Please any help would be gratefull.

My front page code:

<div id="divlist" class="span9">
        
 @{       
     for (int i = 0; i < item; i = i + 3)

     {     

     <div id="divlist2" class="row-fluid">
     @if (teachersList.Count > i)
     {
     <div class="span4" style="height:auto">
            <div class="blocks-list" style="height:auto">
                @Html.DisplayFor(modelItem => teachersList[i].TeacherID). @Html.DisplayFor(modelItem => teachersList[i].TeacherName)
                @*@Html.DisplayFor(modelItem => teachersList[i].StdID)*@
                <div style="float: right; color: Green">
                    @Html.DisplayFor(modelItem => teachersList[i].Department)
                </div>
                <br />
                @Html.DisplayFor(modelItem => teachersList[i].Notes)
                <br />
                
            </div>
        </div>
     }
</div>

我的脚本我在调用广告检索动态内容

My Script where i am calling ad retrieving dynamic content

<script type="text/javascript">
       function join() {
           $("#loader").hide();
       }
       var isPreviousEventComplete = true, isDataAvailable = true, sind=10;
       jQuery(
  function ($) {

      $("#btn_search").click(function () {

      })
      $(document).scroll(function () {
          if ($(document).height() - 34 <= $(window).scrollTop() + $(window).height()) {
              //alert('end reached');
              //Logic to add data at end

              if ((isPreviousEventComplete) && isDataAvailable) {
                  isPreviousEventComplete = false;
                  $(".LoaderImage").css("display", "block");
                  $.ajax({
                      type: "GET",
                      url: "/Home/DynamicP/?sind1=" + sind,
                      beforeSend: function show1() { $("#loader").show(); },
                      
                      success: function (result) {
                          setTimeout(join, 700);                      
                          $("#divlist").append(result);
                          isPreviousEventComplete = true;
                          sind = sind + 3;
                          if (result == '') //When data is not available
                              isDataAvailable = false;
                          $(".LoaderImage").css("display", "none");
                      },
                      
                      error: function (error) {
                          alert(error);
                      }
                  });

数据成功附加到divlist后，样式不会应用于添加的html元素...



请提供任何建议或解决方案。

提前致谢。

After the data is sucessfully appended to divlist the styles are not applied on the added html elements...

Please give any suggestions or solutions.
Thanks in advance.

推荐答案

（ ＃loader）。hide（）;
}
var isPreviousEventComplete = true ，isDataAvailable = true ，sind = 10 ;
jQuery（
function （

("#loader").hide(); } var isPreviousEventComplete = true, isDataAvailable = true, sind=10; jQuery( function (

）{

（ ＃btn_search）。click（ function （）{

}）

("#btn_search").click(function () { })

这篇关于CSS样式未正确应用于由AJAX动态加载的html元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！