加载页面内容Onclick - AJAX

我希望有人能够帮助我解决与将内容加载到jQuery手风琴onclick有关的问题。目前手风琴功能正在运行，内容正在由AJAX加载，问题是我只想在用户点击特定的手风琴叶时加载内容，而不是在加载页面时加载所有内容。加载页面内容Onclick - AJAX

HTML：

<div class="accordionButton">Origin</div> 
<div class="accordionContent"> 
    <a href="javascript:void(0)" class="close">Close</a> 
    <div id="success_origin"></div> 
    <div id="error_origin"></div> 
    <script> 
     $("#success_origin").load("content_origin.html", function(response, status, xhr) { 
      if (status == "error_origin") { 
       var msg = "Sorry but there was an error when loading the page's content: "; 
       $("#error_origin").html(msg + xhr.status + " " + xhr.statusText); 
      } 
     }); 
    </script> 
</div> 

<div class="accordionButton">Style</div> 
<div class="accordionContent"> 
    <a href="javascript:void(0)" class="close">Close</a> 
    <div id="success_style"></div> 
    <div id="error_style"></div> 
    <script> 
     $("#success_style").load("content_style.html", function(response, status, xhr) { 
      if (status == "error_style") { 
       var msg = "Sorry but there was an error when loading the page's content: "; 
       $("#error_style").html(msg + xhr.status + " " + xhr.statusText); 
      } 
     }); 
    </script> 
</div>

等等......

手风琴的JavaScript：

$(document).ready(function() { 
    $('.close').click(function() { 
     $('.close').addClass('hide'); 
     $('.accordionContent').slideUp('normal'); 
     $('.accordionButton').addClass('on'); 
     $('.accordionButton').removeClass('off'); 
     $('.showHeadline').slideDown('normal');  
    }); 

    $('.accordionButton').click(function() { 
     $('.accordionButton').removeClass('on'); 
     $('.accordionButton').addClass('off'); 
     $('.showHeadline').slideUp('normal'); 
     $('.accordionContent').slideUp('normal'); 

     //IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT 
     if($(this).next().is(':hidden') == true) { 
      $('.close').addClass('show'); 
      $(this).addClass('on'); 
      $(this).next().slideDown('normal'); 
      } 
     }); 

    $('.accordionButton').mouseover(function() { 
     $(this).addClass('over'); 

    }).mouseout(function() { 
     $(this).removeClass('over');           
    }); 

    $('.accordionContent').hide(); 
});

我敢肯定这件事情简单，但我倒是很欣赏任何帮助。

感谢， @rrfive

来源

2012-02-20 rrfive

我不知道这是否是你所要求的东西，但如果你正在寻找，当他们点击手风琴按钮原点加载content_origin.html那么你可以换你AJAX调用与jQuery点击处理程序，并给每个按钮一个ID例如

<script> 
    $("#origin-button").click(function() { 
     $("#success_origin").load("content_origin.html", function(response, status, xhr) { 
       if (status == "error_origin") { 
        var msg = "Sorry but there was an error when loading the page's content: "; 
        $("#error_origin").html(msg + xhr.status + " " + xhr.statusText); 
       } 
      }); 
    }); 
</script>

来源

2012-02-20 22:54:11 christophmccann

你加载数据内嵌<script>标签—这将始终会导致一旦页面看到这些标签加载您的内容。您可能想要加载click处理程序中的内容，但这可能会导致动画问题。

此外，您应该仔细检查您的load回调。由AJAX请求返回的status将永远不会等于error_origin或error_style。它应该是一个'字符串分类请求的状态（“成功”，“未修改”，“错误”，“超时”，“中止”或“parsererror”）。 http://api.jquery.com/jQuery.ajax/

来源

2012-02-20 22:56:02

加载页面内容Onclick - AJAX

回答

相关问题