Question

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

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

我非常依赖，因为这是在squarespace上，所以我没有多少代码。

提交表格（成功时），我可以看到隐藏的＆＃39;类已被添加。

所以我想用它作为我的行动：

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

如果我理解这一权利，则希望在提交表单后以淡入的形式显示一个块。

这里有几件事：

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

第二，作为示例，您放置的javascript将永远不会成功，除非按钮在页面加载时被隐藏。您需要将此代码附加到实际的dom事件上才能执行。

这是我建议的解决方案。请注意，此解决方案假定具有您提供的ID的块已经安装在DOM上：

由于您似乎想听一个提交事件，然后使某些东西出现，并且您的代码足够通用，因此您可以：

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

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

最后的陷阱可能是您没有在网站上加载jquery。我建议从Google CDN添加jQuery。

Ajax提交后，Jquery函数无法正常工作

1 个答案: