javascript - 如何让我的 JavaScript 在网站上运行？ (当前代码可以在 Fiddle 上运行，但不能在网站上运行)

Question

我想为产品页面上的自定义字段创建字符计数器。我正在尝试使用以下 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% 确定合适的修复方法。

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

Answer 1

您可以像下面这样更改绑定(bind):

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

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

您需要使用 document.ready 进行 keyup 事件。在此之前，您在 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 代替 $。更新了答案!