Question

当div准备就绪时，hide()设置为document。我想在包含的div变得可见时显示这个div。我还有一个接受用户输入的表单。表单将重定向到其页面action ="<?php echo htmlentities($_SERVER['PHP_SELF']);?>"。提交有一个班级.submitRecord。成功将记录提交给DB后，包含的div变为可见。

PHP代码：

if (isset($_POST['submitRecord']) && $success != ''){
    echo "<div class='containingDiv'>";
       echo "<div class='alloc'>";
         echo "<p class = 'closeButton'> x </p>";
         echo "<p class = 'allocationSuccess'>Allocation Successful for Mr/Mrs ABC</p>";
       echo "</div>";
    echo "</div>";
    };

jQuery代码：

$(document).ready(function(){
  $('.containingDiv, .alloc').hide();
  $(document).on('click', '#saveRecord', function () { 
    if ($(".containingDiv").is(':visible')){
        $('.alloc').slideDown(500);
    }
  });
 $(document).on('click', '.closeButton', function () { 
    $('.alloc').hide(500);
  });
});

表单已提交，并为var $success分配了一个字符串，但.alloc将不会显示。

任何帮助都将深受赞赏。

Answer 1

根据您的标题，您使用的是普通表单提交（无ajax）。这意味着事件的流程如下：

点击了您的按钮;
您的javascript函数已触发，尝试为页面上没有的div设置动画;
访问者被重定向到提交表单的页面，即使有动画，访问者也不会因为重定向而看到它;
处理表单并显示新页面（此处未触发任何javascript onClick事件）;
成功div已添加到页面中，但仍保持隐藏状态。

有两种解决方案：

您使用ajax提交表单，将所有内容保存在同一页面中并为您想要的内容制作动画;
您显示 - 并且不会隐藏在页面加载 - 成功页面上的成功框，您只能在某个timeOut或按钮点击后隐藏它。请注意，您不必在页面加载时隐藏该框，因为它仅在成功的表单提交时添加到页面中。

使用jQuery在页面重定向后显示DIV

1 个答案: