在加载Ajax内容时，ajax - Jquery和Javascript不加载

Question

我正在用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">

Answer 1

问题很可能是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);
    });

}