Question

如果你以前见过这个，请道歉。这是我在这个问题上的第三次尝试，到目前为止，大部分工作一直在隔离问题实际上是什么。

我的项目是加载一系列图片，并提供通过Fancybox iframe上传更多图片的工具。上传后，页面将调用一个函数，该函数执行新图像列表的AJAX请求，将它们重新加载到DIV中并使用Isotope进行布局。

如果我使用onclick从标签触发该功能，它可以正常工作。但是，如果我从Fancybox的关闭函数触发它后，图像会加载到DIV之外，同位素也不会将它们排出。我还确认从按钮触发功能也不起作用。

我在这里使用实际代码构建了一个演示： http://photopedia.com.au/mem/login.taf?_function=test 为简单起见，它避免了上传过程。它只是打开一个Fancybox，要求你关闭它，这会触发load photos（）函数。

以下是代码：

<style>
.element{
width:230px;
height:230px;
//display:inline-block;
}
</style>
<script src="/jquery/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="/jquery/fancybox2/source/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" type="text/css" href="/jquery/fancybox2/source/jquery.fancybox.css" media="screen" />

<script src="/js/isotope.pkgd.min.js" type="text/javascript"></script> 
<script src="/js/imagesloaded.pkgd.js" type="text/javascript"></script> 


    <!-- jQuery with jQuery Easing, and jQuery Transit JS -->
    <script src="/jquery/jquery.easing.1.3.js" type="text/javascript"></script>
    <script src="/jquery/jquery-transit-modified.js" type="text/javascript"></script>

<script>
function loadphotos(){
var $container = $('#container');

$container.load('/mem/memphotos.taf',function(){
$container.imagesLoaded( function() {
$container.isotope({
    itemSelector: '.element',
    layoutMode: 'fitRows'
    })
});
});
};

</script>


<script type="text/javascript">
$(".lightbox").fancybox({
        fitToView   : false,
        autoSize    : true,
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none'
    }); 

$("#uploadphoto").fancybox({
        maxWidth    : 740,
        maxHeight   : 600,
        fitToView   : false,
        autoSize    : true,
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none',
        'afterClose' : function () { 
            loadphotos();
            }
    });



</script>

 <div class=title>
 <h1>Photos</h1>
 </div>
 <div style="clear:both;"></div>



<br>


<!-- if profile name is blank -->
<a href="" onclick="loadphotos();">Load photos</a> <- works

<br>
<br>

<button onclick="loadphotos();">Load photos</button> <- doesn't work

<br>
<br>

<a href='/mem/upload_imagetest.html' id='uploadphoto' class="fancybox fancybox.iframe">
Upload a photo
</a> <- doesn't work

<br>
<br>

<div id="container" style="border:1px dotted red;">



</div>


<script>  
$(document).ready(function() {
    loadphotos();
});
</script>

</body>
</html>

您可以提供任何帮助。

Answer 1

你的按钮很好地完成了这个功能。问题是，当单击<a>标记时，页面将重定向到包含结果的同一页面。像页面刷新一样。

当您按下按钮时，它会调用该函数并完成ajax请求。但是所需的样式未应用于父容器和子容器。因为所有html部分都被ajax请求所取代。看起来你必须改变应用风格的概念。

Button是一个表单元素，如果内容放在<form>内，您可以看到按钮的行为，如下所示。当您按下按钮时，页面将发布并重定向到同一页面，因为未给出操作。

<body>
    <form action="" method="post">
      place Your contents here
    </form>
</body>

要求取决于何时在页面上使用<button>或<a>标记。

并从<body>标记中删除所有外部样式表和js文件以及内联java脚本部分，并将它们放在<head>标记内。

首先加载CSS，然后加载java脚本文件首先加载主要库，如jQuery和其他插件，因为它们依赖于其他库，如下所示。

<link rel="stylesheet" type="text/css" href="/jquery/fancybox2/source/jquery.fancybox.css" media="screen">

<script src="/jquery/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="/jquery/fancybox2/source/jquery.fancybox.pack.js"></script>

通过这样做，您可以减少意外行为并专注于实际问题。

触发同位素

1 个答案: