如何让我的 JavaScript 在网站上运行？（当前代码在 Fiddle 上工作，只是不在网站上）答案

【问题标题】：How can I get my JavaScript to work on website? (Current code is working on Fiddle just not on website)如何让我的 JavaScript 在网站上运行？（当前代码在 Fiddle 上工作，只是不在网站上）
【发布时间】：2017-05-08 22:21:24
【问题描述】：

我想为产品页面上的自定义字段创建字符计数器。我正在尝试使用以下 JavaScript 和 HTML 代码来实现这样的功能：

HTML：

<div class="fields-group-1">    

    <table class="fields_table  product-custom-text-wrapper" cellspacing="0">
        <tbody>
            <tr>
                <td class="label"><label class=" product-custom-text-label" for="custom_text">Custom Text</label></td>
                <td class="value">
                <input type="text" class="field product-custom-text" name="custom_text" value="" placeholder="Enter Custom Text ..." maxlength="16" type="text" pattern="mandatory" mandatory="no"  />
                    <span class="validation-message is-valid-1"></span>
                </td>
            </tr>
        </tbody>
    </table>


</div>

<span id="character_count"></span> //This is where I am attempting to output the Character Count.

JavaScript：

<script type="text/javascript"> 
$('.product-custom-text').keyup(updateCount);
$('.product-custom-text').keydown(updateCount);

function updateCount() {
    var cs = $(this).val().length;
    $('#character_count').text(cs);
}
</script>

在 Fiddle 程序中运行它时，我可以生成字符计数器。但是，当我将上述代码放入网站时，字符计数器似乎不起作用。我检查了源代码，所有的编码都在那里。

根据Code works in fiddle, but not on webpage 的问题，我可以看到其他人遇到了与我类似的问题。作为 JavaScript 的新手，我不能 100% 确定合适的修复方法。

是否有人能够指出我需要进行的相关更改才能使上述编码正常工作的正确方向？

【问题讨论】：

能否请您发布一个指向您的小提琴的链接。
您是否将 jQuery 导入您的页面？还可以尝试将前两行包装在 $(document).ready(function(){})
用$(document).ready(function() { })包装你的JavaScript
您也在使用 jquery。 JSFIddle 天生就有。但是，当您将脚本包含在 html 中时，您还必须将 jquery 添加到脚本标签并将代码包装在 $(document).ready(function(){})

标签： javascript jquery html

【解决方案1】：

您可以如下更改绑定：

jQuery(document).on('keyup', '.product-custom-text', updateCount);
jQuery(document).on('keydown', '.product-custom-text', updateCount);

此绑定不需要在 $( document ).ready(function() { 函数内，因为它适用于可用的 DOM 元素

您需要为 keyup 事件使用 document.ready。在此之前，您在 jQuery 选择器中引用的 DOM 元素不可用。

jQuery(document).on('keyup', '.product-custom-text', updateCount);
jQuery(document).on('keydown', '.product-custom-text', updateCount);

function updateCount() {
    var cs = $(this).val().length;
    jQuery('#character_count').text(cs);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fields-group-1">    

    <table class="fields_table  product-custom-text-wrapper" cellspacing="0">
        <tbody>
            <tr>
                <td class="label"><label class=" product-custom-text-label" for="custom_text">Custom Text</label></td>
                <td class="value">
                <input type="text" class="field product-custom-text" name="custom_text" value="" placeholder="Enter Custom Text ..." maxlength="16" type="text" pattern="mandatory" mandatory="no"  />
                    <span class="validation-message is-valid-1"></span>
                </td>
            </tr>
        </tbody>
    </table>


</div>

<span id="character_count"></span>

编辑：根据讨论，在 wordpress 网站中，$ 可能会发生冲突，因此请尝试使用 jQuery insted 或 $。更新答案！

【讨论】：

感谢您的建议。我试过这个但没有成功。关于<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>，我是通过functions.php 文件将其排入队列还是直接将其硬编码到页面的模板页面中？
@Craig 你必须在你的页面上包含<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jque‌ry.min.js"></script>，你使用jquery代码来使它工作
不要通过functions.php将其加入队列，只需复制并粘贴以在该页面上包含jquery脚本
不幸的是，我复制了您在此处放置的建议代码，但没有成功。
好的，请检查您的浏览器控制台并将javascript错误放在这里。

【解决方案2】：

您正在使用 jQuery 函数，但您是否正在导入 jQuery 以在您的站点中使用它？此外，您的函数应该包装在一个 jQuery docready 函数中。

$( document ).ready(function() {
    //your code
});

它可以在 Fiddle 中使用，因为 jsFiddle 包含 jQuery。在您的构建中，您必须导入它。

【讨论】：

【解决方案3】：

正如您指出的那样，它是 wordpress：无需包含 jquery 源。 WP 默认将其排入队列（尽管其他插件可以删除它）

将您的 jquery 代码包装在 $.ready 中。

对于 wordpress：它强制使用无冲突模式，因此对于所有 jquery 代码，您必须使用 jQuery 而不是 $ 别名，或者使用以下作为 $.ready 包装器：jQuery(function($){ // your code with $ stuff });

【讨论】：