使Ajax输出到任何地方

Question

我试图在体内任何地方输出ajax请求，但是当我将目标类移到其他父div时它不起作用。如何定位正确的元素，以便它可以在我想要的任何地方显示输出？

$('.remotediv').click(function(event) {
  event.preventDefault();
  var projectContainer = $(this).closest('.projects-wrapper1, .projects-wrapper2, .projects-wrapper3').children('.ajax-container').attr('data-container');
  if ($('.ajax-container[data-container="' + projectContainer + '"]').hasClass('open-container')) {
    $('.ajax-container[data-container="' + projectContainer + '"]').addClass('closed-container');
    $('.ajax-container[data-container="' + projectContainer + '"]').removeClass('open-container');
  }
  var fileID = $(this).attr('data-project-file');
  if (fileID !== null) {
    $('html,body').animate({
      scrollTop: $('.ajax-container[data-container="' + projectContainer + '"]').offset().top - 59
    }, 500);
  }
  $('.ajax-container[data-container="' + projectContainer + '"]').load(fileID + " .project-body", function() {
    $('.ajax-container[data-container="' + projectContainer + '"]').addClass('open-container');
    $('.close-project').click(function() {
      $('.ajax-container').addClass('closed-container');
      $('.ajax-container').removeClass('open-container');
      $('html,body').animate({
        scrollTop: $('#gallery-scroll').offset().top - 55
      }, 500);
      setTimeout(function() {
        $('.ajax-container').html('');
      }, 1000);
    });
  });
});

<div id="gallery-scroll"></div>
<div class="projects-wrapper1">
  <div data-project-file="/qa9z2ghv/show/" class="remotediv">
    <button> LOAD CONTENT </button>
  </div>

  <div data-container="container2" class="ajax-container">&nbsp;</div>

</div>

小提琴：^{（小提琴未加载链接，但单击加载内容后确实显示了响应}

https://jsfiddle.net/0Loyg6uj/

我希望它显示我将<div data-container="container2" class="ajax-container">&nbsp;</div>放在body内的位置的输出。

Answer 1

首先使您的代码更具可读性-像这样

$('.remotediv').click(function(event) {
  event.preventDefault();
  var projectContainer = $(this).closest('.projects-wrapper').find('.ajax-container').attr('data-container');
  var $container = $('.ajax-container[data-container="' + projectContainer + '"]');
  $container.toggleClass('open-container closed-container');
  var fileID = $(this).attr('data-project-file');
  if (fileID !== null) {
    $('html,body').animate({
      scrollTop: $container.offset().top - 59
    }, 500);
  }
  $container.load(fileID + " .project-body")
});
$('.ajax-container').on('click', '.close-project', function() {
  var $parent = $(this).closest('.ajax-container');
  $parent.toggleClass('closed-container open-container');
  $('html,body').animate({
    scrollTop: $('#gallery-scroll').offset().top - 55
  }, 500);
  setTimeout(function() {
    $parent.html(''); // why empty???
  }, 1000);
});

然后提取ajax容器，这样我们只有一个容器并给它一个ID

 $('.remotediv').click(function(event) {
   event.preventDefault();
   var $container = $('#ajax-container');
   $container.toggleClass('open-container closed-container');
   var fileID = $(this).attr('data-project-file');
   if (fileID !== null) {
     $('html,body').animate({
       scrollTop: $container.offset().top - 59
     }, 500);
   }
   $container.load(fileID + " .project-body")
 });
 $('#ajax-container').on('click', '.close-project', function() {
   var $parent = $(this).closest('div');
   $parent.toggleClass('closed-container open-container');
   $('html,body').animate({
     scrollTop: $('#gallery-scroll').offset().top - 55
   }, 500);
   setTimeout(function() {
     $parent.html(''); // why empty???
   }, 1000);
 });