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”即可。

Answer 2

为了解释 wordpress 可能使用 jQuery.noConflict() 尝试更改为：

(function($) {
  $(function() {
    $('input.nf-element').on('focus blur', function() {
      $(this).closest('nf-field').find('.nf-field-container').toggleClass('bluebg');
    });
  });    
})(jQuery);