0

ajaxで外部HTMLファイルを読み込んでいます。このコンテンツを実行するには、Javascript と Jquery が必要です。コンテンツが読み込まれると、正しく実行されません。ロードせずにコンテンツがすべてページにある場合、すべてが正常に機能します。

これは、コンテンツをロードする Jquery/Ajax です。

スクリプトは head に配置されません。コンテンツをロードする必要がある 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

問題は、ajax 呼び出しが完了し、対応する div が新しいコンテンツで更新される前に実行される runonload.js および/または tutorial.js にコードがある可能性が最も高いです。

そこにあるコードを遅らせるか、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 に答える