Question

我一直在尝试使用模态对话框，并遇到了一个使用FancyBox JQuery工具的对话框。我试图理解为什么验证脚本在与脚本在同一页面（在body标签中）的HTML格式中正确地工作时，但是如果我在php文件中生成这些元素，验证脚本将失败。

请参阅我的index.php文件：

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" media="all" href="style-modal.css">
    <link rel="stylesheet" type="text/css" media="all" href="fancybox/jquery.fancybox.css">
    <script type="text/javascript" src="fancybox/jquery.fancybox.js?v=2.0.6"></script>
    <script type ="text/javascript" src="like2.js"></script>
    <title></title>
    <script type="text/javascript">
    $(document).ready(function() {

        $(".load").load('show.php');

        function validateEmail(email) { 
            var reg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
            return reg.test(email);
        }

        $(".modalbox").fancybox();

        $("#contact").submit(function() { return false; });

        $("#send").on("click", function(){
            var emailval  = $("#email").val();
            var commentid = $("#commentid").val();

            alert("clicked!");

            var mailvalid = validateEmail(emailval);

            if(mailvalid == false) {
                $("#email").addClass("error");
            }
            else if(mailvalid == true){
                $("#email").removeClass("error");
            }

            if(mailvalid == true) {
                $("#send").replaceWith("<em>Sending...</em>");

                $.ajax({
                type: 'POST',
                url: 'sendmessage.php',
                data: $("#contact").serialize(),
                success: function(data) {
                    if(data == "true") {
                        $("#contact").fadeOut("fast", function(){
                            $(this).before("<p><strong>Success! Your feedback has been sent, thanks :)</strong></p>");
                            setTimeout("$.fancybox.close()", 1000);
                        });
                    }
                });
            }
        });
   });

</script>
</head>
<body>

<div class="load">
</div>

</body>
</html>

请参阅我加载的php文件“show.php”：

<?php
include('connect.php');

echo '<div class="load">

<button class="modalbox" href="#inline">Click</button>

</div>

<div id="inline">
<h3>Enter your email to receive updates</h3>
<form id="contact" name="contact" action="#" method="post">
<label for="email">Your E-mail</label>
<input type="email" id="email" name="email" class="txt">
            <input type="hidden" id="commentid" name="commentid" value="5">
<br>
<button id="send">Send E-mail</button>
</form>
</div>
</div>';
?>

当我点击index.php上的“Click”时这种格式，模式显示正常，但是当我点击带有或不带数据的“发送电子邮件”时，模态会消失而没有任何反馈或验证。是否可以使用此设置？当show.php中div id =“inline”的内容被放入index.html的主体时，所有工作都按预期工作。请协助

模态不通过外部文件生成元素时验证

0 个答案: