javascript - Ajax 提交后的 Jquery 函数不起作用

Question

这是我的情况，这给我带来了很多麻烦..

我有一个ajax提交表单，在提交时，id就像要发生的操作。

我非常依赖，因为这是在 squarespace 上，所以我无法访问太多代码。

提交表单时(成功时)，我可以看到添加了“隐藏”类。

所以我想用它来执行我的操作:

if ( $("input.button").hasClass("hidden") ) {

  $("#block-yui_3_17_2_2_1515660345355_6688").fadeIn();
        };

但似乎什么也没发生!事件警报也不起作用，我相信这是因为它没有重新加载页面，因为隐藏类仅在提交表单时才出现。

还有其他方法可以实现这一目标吗？

非常感谢您的帮助，这将挽救生命!

--更新--

以下所有表单 html:

<form autocomplete="on" action="https://website.squarespace.com" method="POST" onsubmit="
  return (function(form) {
    Y.use('squarespace-form-submit', 'node', function(Y){
      (new Y.Squarespace.FormSubmit({
        formNode: Y.Node(form)
      })).submit('5a568ac053450ad102451bc4', '5a568a42c8302558efde1ae7', 'page-5a568a42c8302558efde1ae7');
    });
    return false;
  })(this)" data-form-id="5a568ac053450ad102451bc4">

<div class="field-list clear">

    <div id="text-yui_3_17_2_1_1515620880734_20061" class="form-item field text required">
        <label class="title" for="text-yui_3_17_2_1_1515620880734_20061-field">FULL NAME
            <span class="required">*</span>
        </label>

        <input class="field-element text" type="text" id="text-yui_3_17_2_1_1515620880734_20061-field">
    </div>

    <div id="email-yui_3_17_2_3_1515620880734_11301" class="form-item field email required">
        <label class="title" for="email-yui_3_17_2_3_1515620880734_11301-field">E-MAIL ADDRESS
            <span class="required">*</span>
        </label>

        <input class="field-element" name="email" x-autocompletetype="email" type="text" spellcheck="false" id="email-yui_3_17_2_3_1515620880734_11301-field">
    </div>

    <div id="radio-yui_3_17_2_1_1515620880734_21108" class="form-item field radio required">
        <div class="title" for="radio-yui_3_17_2_1_1515620880734_21108-field">GENDER
            <span class="required">*</span>
        </div>


        <div class="option">
            <label>
                <input type="radio" name="radio-yui_3_17_2_1_1515620880734_21108-field" value="MALE">
                <div id="check"></div> MALE</label>
        </div>

        <div class="option">
            <label>
                <input type="radio" name="radio-yui_3_17_2_1_1515620880734_21108-field" value="FEMALE">
                <div id="check"></div> FEMALE</label>
        </div>

    </div>

    <div id="radio-yui_3_17_2_1_1515620880734_21855" class="form-item field radio required">
        <div class="title" for="radio-yui_3_17_2_1_1515620880734_21855-field">SHOE SIZE (EU SIZE)
            <span class="required">*</span>
        </div>


        <div class="option">
            <label>
                <input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="36">
                <div id="check"></div> 36</label>
        </div>

        <div class="option">
            <label>
                <input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="37">
                <div id="check"></div> 37</label>
        </div>

        <div class="option">
            <label>
                <input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="38">
                <div id="check"></div> 38</label>
        </div>

        <div class="option">
            <label>
                <input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="39">
                <div id="check"></div> 39</label>
        </div>

        <div class="option">
            <label>
                <input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="40">
                <div id="check"></div> 40</label>
        </div>

        <div class="option">
            <label>
                <input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="41">
                <div id="check"></div> 41</label>
        </div>

        <div class="option">
            <label>
                <input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="42">
                <div id="check"></div> 42</label>
        </div>

        <div class="option">
            <label>
                <input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="43">
                <div id="check"></div> 43</label>
        </div>

        <div class="option">
            <label>
                <input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="44">
                <div id="check"></div> 44</label>
        </div>

        <div class="option">
            <label>
                <input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="45">
                <div id="check"></div> 45</label>
        </div>

        <div class="option">
            <label>
                <input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="46">
                <div id="check"></div> 46</label>
        </div>

    </div>

</div>

<div class="form-button-wrapper form-button-wrapper--align-center">
    <input class="button sqs-system-button sqs-editable-button" type="submit" value="Submit">
</div>


<div class="hidden form-submission-text">Thank you!</div>

<div class="hidden form-submission-html" data-submission-html=""></div>

Answer 1

如果我理解正确的话，您希望在提交表单后出现一个淡入的 block 。

这里有一些事情:

首先，附加任意类更改来使某些事情发生感觉非常脆弱。为什么不尝试将此操作附加到表单提交事件？

其次，除非按钮在页面加载时隐藏，否则作为示例的 JavaScript 永远不会成功。您需要将此代码附加到实际的 dom 事件才能执行它。

这是我提出的解决方案。请注意，此解决方案假设具有您提供的 ID 的 block 已安装在 DOM 上:

由于您似乎想要监听提交事件，然后显示某些内容，并且您的代码足够通用，因此您可以:

$('form').onSubmit(function() {
   $("#block-yui_3_17_2_2_1515660345355_6688").fadeIn();
});

还有更简单的 css 转换，再次假设页面加载时该 block 已经在 DOM 上。

最后一个问题可能是您的网站上没有加载 jquery。我建议从 Google CDN 添加 jQuery。