带有 Google Apps 脚本的 Web 应用程序未运行 jQuery 代码

Question

能否请您帮忙找出为什么部分 jQuery 代码在使用 Google Apps 脚本的网络应用程序中不起作用，“#thank_you”不显示，“email_subscribe”不向上滑动。这是网络应用程序的链接： https://script.google.com/macros/s/AKfycbzwqzFpfaUQ1Bnp6q1eo_rEXK7bn3iJLePUdNjymirHxCgz9UYi/exec

这里是代码：

<div>
    <form id="email_subscribe">
        <input type="email" name="email" id="email" placeholder="Enter your email">
        <input type="submit" value="Subscribe">
    </form>
    <span id="thank_you" hidden="true">Thank you!</span>
</div>
<?!= HtmlService.createHtmlOutputFromFile('CSS').getContent(); ?>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>
    <script>
        $(document).ready(function() {
            $("#email_subscribe").submit(function() {
                google.script.run.withSuccessHandler(function(ret) {
                    $("#thank_you").show("slow");
                    $("#email_subscribe").slideUp();
                    console.log(ret);
                }).addEmail(this); 
            });
        });
    </script>

Answer 1

表单提交按钮的默认行为是隐藏表单的元素。因此，在提交元素后隐藏而不是“谢谢”出现。要抑制默认行为，您需要做的就是从 jQuery 中返回 false，如下所示：

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>
    <script>
        $(document).ready(function() {
            $("#email_subscribe").submit(function() {
                google.script.run.withSuccessHandler(function(ret) {
                    $("#thank_you").show("slow");
                    $("#email_subscribe").slideUp();
                    console.log(ret);
                }).addEmail(this); 
                return false; 
            });
        });
    </script>

您的功能无法按预期工作的另一个原因可能是因为您正在使用 successHandler 运行该功能。因此，如果添加电子邮件功能失败，则显示和向上滑动的脚本将无法运行。当我尝试访问上面的链接时，控制台中出现以下错误：

未捕获的错误：文档 1VY3yA_pvXBFX789RHbDwNQoGYxee4P_g6rkqjE-KpzY 丢失（可能已被删除？） 在添加电子邮件

希望能回答你的问题！