Question

我有以下代码来触发和调用AJAX，然后尝试打开弹出窗口：

function ajax_post( form_info ){
  var arr = form_info.split('#');
  var id = arr[0];
  var action = arr[1];
  var request = $.ajax({
    url: "../ajax_handler.php",
    type: "POST",
    data: {id : id, action: action},
});

  request.done(function(msg) {
    $("#result_container").html( msg );
  });

  request.fail(function(jqXHR, textStatus) {
    alert( "Request failed: " + textStatus );
  });
}

$('.open-popup').on("click", function() {
  var clicked_id = $(this).attr('id');
  ajax_post( clicked_id );    
    $('.overlay-pop').fadeIn('slow');
    $('.trading-floor-popup').fadeIn('slow');
  });
  $('.close, .overlay-pop').click(function() {
    $('.overlay-pop').fadeOut();
    $('.trading-floor-popup').fadeOut();
  });
  $('.menu').click(function() {
  $('.nav').slideToggle();
});

以下是在我的页面中生成的弹出代码：

<div class="overlay-pop"></div><!--overlay close-->
  <div class="trading-floor-popup">
  <a class="close"><img src="images/cross.png" alt=""/></a>
  <div class="trading-floor-popup-scroll">
  <div class="trading-f-l">
  <span class="live">
        <h6>Contest Goes Live On</h6>
        <div id="timer"></div>
        <?php
          $year = date( 'Y', $event_start_time );
          $month = date( 'n', $event_start_time );
          $day = date( 'j', $event_start_time );
        ?>

        <p style="text-transform: uppercase;"><?php echo $start_date; ?></p>
        <p style="text-transform: uppercase;"><?php echo $start_time; ?></p>
        </span>
        <ul class="m-top-15">
        <li><h1>NFL $300 PLAY-ACTION</h1><span><b>( Balance: </b><i>$7.45 )</i></span></li>
        <li><b>Tickyr $: </b><i>$3</i></li>
        <li><b>Total Prizes: </b><i>$300,000</i></li>
        <li><b>Type: </b><i>0</i></li>
        <li><b>Entries: </b><i>6767/453k</i></li>
        <li><b>TRPs: </b><i>12</i></li>
        <li><b>End Time: </b><i>200</i></li>
        </ul>
         <div class="join-contest">
        <a href="">JOIN CONTEST</a>
        </div><!--join-contest close-->
        </div><!--trading-f-l close-->

        <div class="wrapper">
        <div class="enterants">
        <!--<h1>Contest Details</h1>
    <img class="border" src="images/border1.png">-->
        <div class="enterants-primary">
        <h1>Entrants</h1>
        <div class="search fr">
    <input type="text" placeholder="Search Entrant..."><input type="submit" value="">
    </div>
        <ul>
        <li>YeaUaintready <b>M</b></li>
        <li>Garcia49ers05 </li>
        <li>Ljanayb87 <b>M</b></li>
        <li>Rweeter79 </li>
        <li>Brogowski </li>
        <li>Squantos </li>
        <li>Garcia49ers05 </li>
        <li>Ljanayb87 <b>M</b></li>
        <li>Rweeter79 </li>
        <li>YeaUaintready <b>M</b></li>
        <li>Garcia49ers05 </li>
        <li>Ljanayb87 <b>M</b></li>
        <li>Rweeter79 </li>
        <li>Brogowski </li>
        <li>Squantos </li>
        <li>Garcia49ers05 </li>
        <li>Ljanayb87 <b>M</b></li>
        <li>Rweeter79 </li>
        <li>Rweeter79 </li>
        </ul>
        </div><!--enterants-primary close-->

        <div class="enterants-secondary">
         <h1>Prize Payouts</h1>
        <ul>
        <li>1st <b>$20,000.00</b></li>
        <li>2nd <b>$5,000.00</b></li>
        <li>3rd <b>$20,000.00</b></li>
        <li>4th <b>$45,000.00</b></li>
        <li>5th <b>$20,000.00</b></li>
        <li>6th <b>$2,000.00</b></li>
        <li>7th <b>$34,000.00</b></li>
        <li>8th <b>$20,000.00</b></li>
        <li>9th - 10th <b>$5,000.00</b></li>
        </ul>
        </div><!--enterants-secondary close-->

        </div><!--enterants close-->
  </div><!--wrapper close-->
        </div><!--trading-floor-popup-scroll close-->
  </div><!--trading-floor-popup close-->

如何在AJAX将其加载到页面后显示此内容？

Answer 1

如果您的代码请求成功，请显示div。

function ajax_post( form_info ){
  var arr = form_info.split('#');
  var id = arr[0];
  var action = arr[1];
  var request = $.ajax({
    url: "../ajax_handler.php",
    type: "POST",
    data: {id : id, action: action},
});

  request.done(function(msg) {
    $("#result_container").html( msg );
   $('.overlay-pop').fadeIn('slow');
    $('.trading-floor-popup').fadeIn('slow');
  });

  request.fail(function(jqXHR, textStatus) {
    alert( "Request failed: " + textStatus );
  });
}

$('.open-popup').on("click", function() {
  var clicked_id = $(this).attr('id');
  ajax_post( clicked_id );    
  });
  $('.close, .overlay-pop').click(function() {
    $('.overlay-pop').fadeOut();
    $('.trading-floor-popup').fadeOut();
  });
  $('.menu').click(function() {
  $('.nav').slideToggle();
});

anoyher选项是ajax done func

$.ajax({
  url: "test.html",
  context: document.body
}).done(function() {
  $( this ).addClass( "done" );
});

来自此法典的

： http://api.jquery.com/jquery.ajax/

在AJAX加载HTML后打开弹出窗口

1 个答案: