javascript - 在 wordpress 中运行多个 js 脚本

Question

我正在尝试在 wordpress function.php 中运行两个脚本，一个用于输入屏蔽，另一个用于邮政编码搜索 api。我设法让每个脚本单独工作，但是一旦我把它们放在一起，似乎每个脚本都在取消另一个。

主要思想是屏蔽电话和邮政编码输入，并通过api验证邮政编码并完成地址和城市。

抱歉，如果这是一个重复的主题，但我无法使用我在网上找到的参考资料来让它工作。

咆哮我的脚本

function mascara_cadastro_cliente(){

    if( is_page('cadastrar') ){
        wp_register_script('masked-input', 'https://example.com/'.'/js/jquery.maskedinput.min.js', array('jquery'));
        wp_enqueue_script ('masked-input');


        wp_register_script('valida-cep', 'https://example.com/'.'/js/jquery.min.js', array('jquery'));
        wp_enqueue_script ('valida-cep');
    }
}
add_action('wp_enqueue_scripts', 'mascara_cadastro_cliente');

function activate_masked_input(){
   if( is_page('cadastrar') ){
?>

        <script type="text/javascript">

                jQuery( function($){
                    $("#reg_billing_postcode").mask("99999-999");
                     $("#reg_billing_phone").mask("(99) 99999-9999");

                });

         </script>

<?php 
    }
}
add_action('wp_footer', 'activate_masked_input');

function activate_valida_cep(){
    if(is_page('cadastrar')){
?>      
        <script type="text/javascript">            
        $(document).ready(function() {

            function limpa_formulário_cep() {
                // Limpa valores do formulário de cep.
                $("#reg_billing_address_1").val("");
                $("#bairro").val("");
                $("#reg_shipping_city").val("");
                $("#uf").val("");
                $("#ibge").val("");
            }

            //Quando o campo cep perde o foco.
            $("#reg_billing_postcode").blur(function() {

                //Nova variável "cep" somente com dígitos.
                var cep = $(this).val().replace(/\D/g, '');

                //Verifica se campo cep possui valor informado.
                if (cep != "") {

                    //Expressão regular para validar o CEP.
                    var validacep = /^[0-9]{8}$/;

                    //Valida o formato do CEP.
                    if(validacep.test(cep)) {

                        //Preenche os campos com "..." enquanto consulta webservice.
                        $("#reg_billing_address_1").val("...");
                        $("#bairro").val("...");
                        $("#reg_shipping_city").val("...");
                        $("#uf").val("...");
                        $("#ibge").val("...");

                        //Consulta o webservice viacep.com.br/
                        $.getJSON("https://viacep.com.br/ws/"+ cep +"/json/?callback=?", function(dados) {

                            if (!("erro" in dados)) {
                                //Atualiza os campos com os valores da consulta.
                                $("#reg_billing_address_1").val(dados.logradouro);
                                $("#bairro").val(dados.bairro);
                                $("#reg_shipping_city").val(dados.localidade);
                                $("#uf").val(dados.uf);
                                $("#ibge").val(dados.ibge);
                            } //end if.
                            else {
                                //CEP pesquisado não foi encontrado.
                                limpa_formulário_cep();
                                alert("CEP não encontrado.");
                            }
                        });
                    } //end if.
                    else {
                        //cep é inválido.
                        limpa_formulário_cep();
                        alert("Formato de CEP inválido.");
                    }
                } //end if.
                else {
                    //cep sem valor, limpa formulário.
                    limpa_formulário_cep();
                }
            });
        });

         </script>

调试页面我收到以下异常

jquery.min.js?ver=5.2.3:2 jQuery.Deferred exception: $(...).live is not a function TypeError: $(...).live is not a function
    at HTMLDocument.<anonymous> (https://example.com/js/main.js:177:28)
    at e (https://example.com/js/jquery.min.js?ver=5.2.3:2:29453)
    at t (https://example.com/js/jquery.min.js?ver=5.2.3:2:29755) undefined
k.Deferred.exceptionHook @ jquery.min.js?ver=5.2.3:2
jquery.min.js?ver=5.2.3:2 jQuery.Deferred exception: $(...).mask is not a function TypeError: $(...).mask is not a function
    at HTMLDocument.<anonymous> (https://example.com/cadastrar/:699:33)
    at e (https://example.com/js/jquery.min.js?ver=5.2.3:2:29453)
    at t (https://example.com/js/jquery.min.js?ver=5.2.3:2:29755) undefined
k.Deferred.exceptionHook @ jquery.min.js?ver=5.2.3:2
jquery.min.js?ver=5.2.3:2 Uncaught TypeError: $(...).live is not a function
    at HTMLDocument.<anonymous> (main.js:177)
    at e (jquery.min.js?ver=5.2.3:2)
    at t (jquery.min.js?ver=5.2.3:2)
jquery.min.js?ver=5.2.3:2 Uncaught TypeError: $(...).mask is not a function
    at HTMLDocument.<anonymous> ((index):699)
    at e (jquery.min.js?ver=5.2.3:2)
    at t (jquery.min.js?ver=5.2.3:2)

标签： javascriptjquerywordpress