Javascript没有在Wordpress中发射4.6.1

下面的代码在jfiddle中工作，但是一旦在我的WordPress网站上它不会触发。我更新到4.6.1。我似乎无法在控制台中发现任何错误。有任何想法吗？Javascript没有在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>

UPDATE

它看起来像问题在于生成HTML的插件，而不是我正在使用的JavaScript。如果我手动粘贴相同的HTML，该输入字段确实会更改父类，但表单插件生成的字段（NinjaForms）都不会改变。

我不确定这里是否有帮助的范围，但如果有人有任何想法，为什么会这样，我会很感激！

来源

2016-09-16 Nathan S

你如何包含这个脚本？你是否已经验证过它实际上是被浏览器包含/请求的？ – hungerstar

wordpress通常使用'jQuery.noConflict（）'，它使'$'未定义。检查浏览器控制台是否存在错误 – charlietfl

您可以包含小提琴吗？ –

要考虑可能使用WordPress的jQuery.noConflict()尝试改用：

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

来源

2016-09-16 13:35:43 charlietfl

我的代码中的'容器'之前有一个空格，然后它在小提琴中工作。但不是在我的WordPress的网站。为了进一步澄清，它更新WordPress的最新版本之前工作！ –

简单地加上 “jQuery的” 替换 “$”。

来源

2016-09-16 13:48:00

这在小提琴中起作用，但不在我的网站上。有些东西必须阻止脚本发射，但我没有看到任何控制台错误。 –

Javascript没有在Wordpress中发射4.6.1

回答

相关问题