Javascript 在 WordPress 4.6.1 中未触发

Question

下面的代码在 jfiddle 中运行，但是一旦在我的 WordPress 网站上，它就不会触发。我已经更新到4.6.1了。我似乎也无法在控制台中找到任何错误。有什么想法吗？

CSS:

<style>.bluebg { background: cyan; }</style>

HTML:

<nf-field>
    <div class="nf-field-container textbox-container  label-left ">
       <div class="nf-before-field"><nf-section></nf-section></nf-section></div>
       <div class="nf-field"><div id="nf-field-8-wrap" class="field-wrap textbox-wrap nf-pass" data-field-id="8">   
            <div class="nf-field-label">
            <label for="nf-field-8" class="">Full Name <span class="ninja-forms-req-symbol">*</span></label></div>
                <div class="nf-field-element">
                <input id="nf-field-8" name="nf-field-8" class="ninja-forms-field nf-element" value="" type="text">
            </div>  
            </div>
        </div>
        <div class="nf-after-field"><nf-section><div class="nf-input-limit"></div><div class="nf-error-wrap nf-error"></div></nf-section>
        </div>
    </div>
</nf-field>

JavaScript:

<script>
$('input.nf-element').bind('focus blur', function () {
    $(this).closest('nf-field').find('.nf-field-container').toggleClass('bluebg');
});
</script>

更新

看起来问题出在生成 HTML 的插件中，而不是我正在使用的 javascript 中。如果我手动粘贴相同的 HTML，该输入字段确实会更改父类，但表单插件生成的任何字段 (NinjaForms) 都不会更改。

我不确定这是否超出了这里的帮助范围，但如果有人知道为什么会这样，我将不胜感激!

Answer 1

只需将“$”替换为“jQuery”即可。