javascript - 为什么我的 $ (".selector").show(900);代码只在浏览器控制台中启动，但从不在助手中启动？

Question

我的 $(".submitNumberForm").show(900);我的 Template.home.helpers 中的代码无法启动。但是，当代码在浏览器控制台中运行时，它可以完美运行。

$(".submitNumberForm").show(900); 的事实无法在 Template.home.helpers 中运行意味着 HTML 表单 由类名表示:.submitNumberForm永远不会显示并保持隐藏状态。

如果有人能解释我的代码有什么问题，我将不胜感激。

在下面找到我的帮助代码:../client/main.js ，特别注意$(".submitNumberForm").show(900); .

Template.home.helpers({

    'displaySubmitForm': function () {

        var verificationCode = Meteor.user().profile.telephoneNumberVarificationCode;
        var verificationCodeTest = Meteor.user().profile.telephoneNumberVarified;

        if( typeof verificationCode === 'undefined' && typeof verificationCodeTest === 'undefined'){
                console.log("displaySubmitForm verificationCode: " +verificationCode);
                console.log("displaySubmitForm verificationCodeTest: " +verificationCodeTest);

                alert("displaySubmitForm: TRUE");

                $(".submitNumberForm").show(900);

                return true;
            }

        else {
                alert("displaySubmitForm: FALSE");

                $(".submitNumberForm").hide(900);

                return false;
            }
    }

});

当 home页面刷新，浏览器控制台打印:

displaySubmitForm verificationCode: undefined
displaySubmitForm verificationCodeTest: undefined

并且警报功能显示一个弹出窗口显示:displaySubmitForm: TRUE ，但是 $(".submitNumberForm").show(900);不点火!

在下面找到我的:<template name="home">代码 ../client/main.html .请注意 {{displaySubmitForm}}在模板的顶部/开头，显示单词 true ，但是 HTML 表单的其余部分 submitNumberForm根本不显示。这再次表明 $(".submitNumberForm").show(900);代码没有启动

<template name="home">
{{displaySubmitForm}}

    {{#if displaySubmitForm}}

        <div class="form-group submitNumberForm">

            <div class="col-sm-10">
                    <input type="number" class="form-control" id="telephoneNumber" placeholder="Enter Number"  name="telephoneNumber">
            </div>

            <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                    <button type="button" id="submitNumber" class="btn btn-primary btn-block">Submit</button>
            </div>
            </div>

        </div>

    {{else}}

    {{/if}}

</template>

在下面找到我的 CSS 文件:.../client/main.css

.submitNumberForm{
    display: none; 
}

澄清一下，html 表单 submitNumberForm默认情况下是隐藏的，只显示 $(".submitNumberForm").show(900);基于 Template.home.helpers 中指定的条件

同样，当我从帮助程序复制代码、粘贴并在控制台中运行时，Html 表单 submitNumberForm出现。任何人都可以向我解释为什么这个 $(".submitNumberForm").show(900);没有像预期的那样在助手中启动？

Answer 1

当您使用 {{#if displaySubmitForm}} 时，它意味着:在 {{#if}} 和 {{/if 之间生成 html 代码}} 当 displaySubmitForm helper 返回 true 时标记。

当您的助手正在执行时，if 中的 html 元素不存在。 因此，您的选择器:代码中的 $(".submitNumberForm") 没有选择任何内容，因为 submitNumberForm 元素尚不存在。

之后，它会在控制台上运行，因为 helper 已经执行并且现在生成了 html。