Fancybox (v1.3.1) showActivity() 在 Chrome/Safari 中显示不一致

Question

我正在对fancybox 使用以下调用：$.fancybox.showActivity();显示加载动画。它适用于 Firefox 和 IE。然而，Chrome 和 Safari 非常不一致。因此，为了测试调用是否有问题，我创建了一个按钮并通过 JS 函数附加调用。当我单击按钮（以验证呼叫本身是否有效）然后按下实际上是我正在对其进行编码的按钮时，它就会起作用。但是，如果我不按（验证测试）按钮，而只按实际代码按钮，则它不会显示。我也可以在调试器中看到 div。这种不一致的功能有什么原因吗？

代码片段：

验证测试按钮：

<button type="button" onclick="checkFancybox();">Check Fancybox</button>            
<script>
function checkFancybox(){
$.fancybox.showActivity();
alert("Fancybox call completed.");
}
</script>

实际编码按钮：

<form id="video-upload-form" action="{url}?nexturl={nextUrl}" 
      method="post" enctype="multipart/form-data" >
<input name="file" type="file"/>
<input name="token" type="hidden" value=""/>
<input value="Upload Video File" type="button" name="submitVideoUpload" 
       onClick="checkFile()" class="button" />
</form>
<script> 
 function checkFile(){
    //RegEx for valid file name and extensions.
    var fileVal = document.forms["video-upload-form"].elements['file'].value;

    if(fileVal != ""){
      //notify user of activity
      $.fancybox.showActivity();
      document.getElementById('vintro-upload-form').submit();
    }else{alert('Please select the Video file.');}
 }
</script>

谢谢。

Answer 1

为了正确......如果你在 HTML 中钩住 js 函数，你最好使用

<input value="Upload Video File" type="button" name="submitVideoUpload" 
   onClick="javascript:checkFile();" class="button" />

“javascript:;”很重要。这样你就可以确保它在 x-browser 上运行。

除此之外，您可能想这样尝试：

<input id="mybutton" value="Upload Video File" type="button" name="submitVideoUpload" class="button" />
<script>
// Once the DOM is ready
$(function(){
    // bind your function
    $("#mybutton").click(function(){ checkFile(); });
});

// define your function
function checkFile(){
    //RegEx for valid file name and extensions.
    var fileVal = document.forms["video-upload-form"].elements['file'].value;

    if(fileVal != ""){
        //notify user of activity
        $.fancybox.showActivity();
        document.getElementById('vintro-upload-form').submit();
    }
    else { alert('Please select the Video file.'); }
}
</script>

在 DOM 加载后绑定点击处理程序。这样，当处理程序真正找到要挂钩的 HTML 时，它就可以被挂钩。