WordPress中PHP函数内嵌入jQuery数字格式化代码失效问题

我来帮你排查一下这个问题，在WordPress环境里集成这段jQuery代码失效，主要有以下几个常见原因，对应解决方法也一并给你：

1. WordPress的jQuery无冲突模式限制 #

WordPress默认会启用jQuery的noConflict()模式，这意味着你不能直接用$作为jQuery的别名，必须用完整的jQuery关键字，或者手动重新映射$。

你的原代码里直接用了$('input.number')，在WordPress环境下这会找不到jQuery对象，导致事件绑定失败。

解决方法：
把代码里的$替换成jQuery，或者用自执行函数包裹代码，让内部可以使用$：

<?php function teste() { ?>
<script type="text/javascript">
// 方法1：用jQuery代替$
jQuery('input.number').keyup(function(event) {
    // skip for arrow keys
    if(event.which >= 37 && event.which <= 40){
        event.preventDefault();
    }
    jQuery(this).val(function(index, value) {
        return value
            .replace(/\D/g, "")
            .replace(/([0-9])([0-9]{2})$/, '$1.$2')
            .replace(/\B(?=(\d{3})+(?!\d)\.?)/g, ",")
        ;
    });
});

// 或者方法2：自执行函数映射$
/*
(function($) {
    $('input.number').keyup(function(event) {
        // skip for arrow keys
        if(event.which >= 37 && event.which <= 40){
            event.preventDefault();
        }
        $(this).val(function(index, value) {
            return value
                .replace(/\D/g, "")
                .replace(/([0-9])([0-9]{2})$/, '$1.$2')
                .replace(/\B(?=(\d{3})+(?!\d)\.?)/g, ",")
            ;
        });
    });
})(jQuery);
*/
</script>
<input type="text" class="number">
<?php } ?>

2. 脚本执行时机过早，DOM未完全加载 #

如果你的脚本在页面DOM还没渲染完成时就执行了，input.number元素还不存在，jQuery无法找到它并绑定事件。

解决方法：
把代码放到DOMContentLoaded事件或者jQuery的ready()方法里，确保DOM加载完成后再执行：

<?php function teste() { ?>
<script type="text/javascript">
jQuery(document).ready(function($) {
    $('input.number').keyup(function(event) {
        // skip for arrow keys
        if(event.which >= 37 && event.which <= 40){
            event.preventDefault();
        }
        $(this).val(function(index, value) {
            return value
                .replace(/\D/g, "")
                .replace(/([0-9])([0-9]{2})$/, '$1.$2')
                .replace(/\B(?=(\d{3})+(?!\d)\.?)/g, ",")
            ;
        });
    });
});
</script>
<input type="text" class="number">
<?php } ?>

3. 脚本位置问题：脚本在input元素之前加载 #

你的原代码里脚本是写在input元素前面的，当脚本执行时，input还没有被浏览器解析出来，所以jQuery找不到目标元素。

解决方法：
把脚本放到input元素的后面，或者用上面提到的DOM就绪方法来规避这个顺序问题。

综合以上几点，最稳妥的方式是同时处理无冲突模式和DOM就绪事件，修改后的代码应该就能正常工作了。

内容的提问来源于stack exchange，提问作者Alonso Requião