国际电话输入 JQuery 插件 - ajax html 响应后的呼叫集实例

Posted 2023-05-09

【中文标题】国际电话输入 JQuery 插件 - ajax html 响应后的呼叫集实例

【英文标题】：International Telephone Input JQuery Plugin - Call set instance after ajax html response

【发布时间】：2021-10-27 05:30:57

【问题描述】：

我正在使用这个插件来验证 tel html 输入 https://github.com/jackocnr/intl-tel-input

我通过 ajax 响应发送表单并接收更新的 html 结构。当我将此 html 设置为页面时，它会丢失插件实例，并且它再次是正常的 tel 输入，没有附加插件实例。我如何调用以前的实例来接收到技术上相同的新输入？

// Call and set plugin instance
var inputRec = document.querySelector('#phone_number_rec');
var itiRecruiter = window.intlTelInput(inputRec, 
    hiddenInput: "full",
    initialCountry: "auto",
    geoIpLookup: function(callback) 
        $.get('https://ipinfo.io', function() , "jsonp").always(function(resp) 
            var countryCode = (resp && resp.country) ? resp.country : "us";
            callback(countryCode);
        );
    ,
    utilsScript : base_url + '/public/assets/modules/intl-tel-input-master/build/js/utils.js',
);

// Send form through ajax
// Submit recruiter experience
    $('body').on('submit', '.submit-individual-recruiter', function(e)
        e.preventDefault(e);
        var form = $(this);
        var post_url = $(this).attr('action'); //get form action url
        var form_data = $(this).serialize(); //Encode form elements for submission

        if ($(this)[0].checkValidity() === false) 
            event.stopPropagation();
            form.addClass('was-validated');
         else 
            $(this).addClass('was-validated');
            var responseState = false;
            var jqxhr = $.ajax(
                url : post_url,
                type: 'post',
                data : form_data,
            ).done(function(response)
                response = JSON.parse(response);
                if(response.result == 'success')
                    responseState = true;
                    iziToast.success(
                        message: response.message,
                        position: "topRight"
                    );
                 else if(response.result == 'error')
                    iziToast.error(
                        message: response.message,
                        position: "topRight"
                    );
                
            );
            
            jqxhr.always(function() 
                if(responseState == true)
                    var $row = $('#recruiter-experience');
        
                    var url = base_url + '/get_info/experience';
                    
                    $.post( url, function( response ) 
                        response = JSON.parse(response);
                        $row.html(response.recruiterView.data);
                    );
                
            );
        
    );

【参考方案1】：

你替换了 dom，所以你初始化 tel-validator 的元素不见了。

您可以做的一件事是将初始化程序包装到一个函数中，这样您就可以再次调用它

function initializeTel() 
    var inputRec = document.querySelector('#phone_number_rec');
    var itiRecruiter = window.intlTelInput(inputRec, 
        hiddenInput: "full",
        initialCountry: "auto",
        geoIpLookup: function(callback) 
            $.get('https://ipinfo.io', function() , "jsonp").always(function(resp) 
                var countryCode = (resp && resp.country) ? resp.country : "us";
                callback(countryCode);
            );
        ,
        utilsScript : base_url + '/public/assets/modules/intl-tel-input-master/build/js/utils.js',
    );


// call it initially
initializeTel();



// and then after u received and parsed the response 

initializeTel();

【讨论】：

成功了，谢谢。我只是将实例的初始化更改为全局的，因此我可以访问它并查看它是否已经被定义为预防措施。