如何让我的JavaScript在网站上工作？ （目前的代码正在Fiddle工作，而不是在网站上）

Question

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

HTML：

if [ $# -eq 0 ]; then
  echo "Usage: ./dir_depth.sh <path>"
  exit1
fi

x=`source isdir.sh $1`
if [ $x -eq -1 ]; then
  echo "no such path $1"
fi
dir=$1
maxD=0
dirs=`source list_dirs.sh`
for f in $dirs
do
  if [ $x -ne 0 ]; then
    x=`dir_depth.sh $f`
    if [ "$x" -eq "$maxD" ]; then
      maxD=x;
    fi
  fi
  echo $f
done
echo $((maxD++))

JavaScript的：

<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.

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

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

是否有人能够指出我需要做出的相关更改，以便我的上述编码能够正常工作？

Answer 1

您可以更改下面的绑定：

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

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

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

＆＃13;

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

修改：根据讨论，在wordpress网站中，可能存在$冲突的可能性，因此请尝试使用jQuery $。更新的答案！

Answer 2

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

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

它适用于小提琴，因为jsFiddle包含jQuery。在您的构建中，您必须导入它。

Answer 3

正如你所指出的那样，它是wordpress：不需要包含jquery源代码。 WP默认将它排队（尽管其他插件可以删除它）

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

中

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