0

我正在使用 ajax 加载外部 HTML 文件。此内容需要 Javascript 和 Jquery 才能运行。当内容加载时，它没有正确运行。如果内容都在页面上而没有加载，那么一切正常。

这是我的加载内容的 Jquery/Ajax。

脚本没有放在头部，我将它放在需要加载内容的 div 上方。

 <script language="javascript">
function example_ajax_request() {
  $('#bottom_content').html('<p><img src="ajax-loader.gif" width="32" height="32" /></p>');
  setTimeout('example_ajax_request_go()', 2000);
}
function example_ajax_request_go() {
    $("#bottom_content")
        .hide()
        .load('bottom.html', function(){
        alert($(this).find('script').length)
            $(this)
                .fadeIn(2000)
                .find('script').appendTo('head');
        });
}
$(document).ready(function() {
   example_ajax_request();
});

</script>
  <div style="position:absolute; left: 44%; margin-left: -450px; top: -100px; background-image:url(images/AG_V4_bottom_section_back.png); width: 1126px; height: 296px; z-index: 5000;">
   <div id="bottom_content" style="width:1125px; height: 296px;"></div>
  </div>

这是jquery。

它正在加载到一个名为 bottom_content 的 div id 中。

我尝试查看 getscript、.live、.on、ajaxcomplete，但我似乎无法将它们放在一起。

欢迎任何帮助。

古兹

bottom.html 代码

<div style="width: 370px; height: 45px; padding-left: 30px; float:left;">NEWS</div>
  <div style="width: 340px; height: 45px; padding-left: 30px; float:left;">FEATURED PROJECT</div>
  <div style="width: 310px; height: 45px; padding-left: 30px; float:left;">FEATURED PROJECT</div>
  <div class="percentagewrap" style="width: 400px; float:left; margin-right: 2px;">
    <div id='mycustomscroll2' class='flexcroll'>
      <div style="width: 325px; margin: auto; text-align:left;" class="white_text01"> <strong>6-27-12</strong><br />
        I made some changes to the site. I changes the backgrounds of each page. I hope you like them! <br />
        <br />
        <strong>3-20-12</strong> <br />
        I would like to welcome you to the launch of AndrewGuzman.com version 3. I have redesigned everything from scratch and I have included some of my 3D work. I am currently upgrading my 3D skills so stay tuned to the site for more 3D content. And of course, I have my Web, Logo and Print sections as well. I would love to hear what you think about my site so send me your thoughts on my contact page. Thanks and Enjoy. <br />
        <br />
        <strong>10-10-11</strong> <br />
        3D Animation Content is coming soon I have been very hard at work on some intensive 3Ds Max training. Will have some 3D designs for the site around the X-mas holiday. I am very excited to show everyone what I have been doing. <br />
        <br />
      </div>
    </div>
  </div>
  <div style="float: left; width: 365px; height: 210px;"><div style="width: 293px; margin: auto;"><img src="images/featured_image.jpg" width="293" height="184" vspace="4" border="0" />
  <div style="height: 30px; width: 100%;"><div class="white_text01" style="margin: auto; width: 250px;">David-Alan-Hughes.com   | View Project</div></div>
  </div>
  </div>

  <div style="float: left; width: 340px; height: 210px;">
<div id="contact_form">
  <form name="contact" method="post" action="">
    <fieldset>
      <label for="name" id="name_label">Name</label>
      <input type="text" name="name" id="name" size="30" value="" class="text-input" />
      <label class="error" for="name" id="name_error">This field is required.</label>

      <label for="email" id="email_label">Return Email</label>
      <input type="text" name="email" id="email" size="30" value="" class="text-input" />
      <label class="error" for="email" id="email_error">This field is required.</label>

      <label for="phone" id="phone_label">Return Phone</label>
      <input type="text" name="phone" id="phone" size="30" value="" class="text-input" />
      <label class="error" for="phone" id="phone_error">This field is required.</label>

        <br />
      <input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
    </fieldset>
  </form>
</div>

  </div>

头上的脚本

<!-- news scroller-->
    <link href="css/tutorsty.css" rel="stylesheet" type="text/css" />
<link href="css/flexcrollstyles.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src="js/flexcroll.js"></script>


<!-- slider-->
<script src="js/modernizr-2.6.1.min.js"></script>
    <script src="js/jquery-1.2.3.pack.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.0.min.js"></script>


<script type="text/javascript">
jQuery.noConflict();
</script>
    <script src="js/lean-slider.js"></script>

  <link rel="stylesheet" href="css/lean-slider.css" type="text/css" />
    <link rel="stylesheet" href="css/sample-styles.css" type="text/css" />

<!-- ajax jquery contact form-->



<script src="js/runonload.js"></script>
<script src="js/tutorial.js"></script>
<link href="css/tutorial.css" media="all" type="text/css" rel="stylesheet">
4

1 回答 1

0

问题很可能是 runonload.js 和/或 tutorial.js 中的代码在您的 ajax 调用完成并且相应的 div 更新为新内容之前运行。

我认为您只需要延迟其中的任何代码，或者在填充 div 后重新运行它。

由于我不知道那些包含的 js 文件中会发生什么，我仍然只是猜测。

function example_ajax_request_go() {
    $("#bottom_content")
        .hide()
        .load('bottom.html', function(){
            //Here you need to add calls to initialize the contents
            $(this).fadeIn(2000);
    });

}

于 2013-02-04T16:22:22.247 回答