国际电话输入 JQuery 插件 - 在 ajax html 响应后调用设置实例

Question

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

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

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

Answer 1

好吧，你替换了 dom，所以你初始化电话验证器的元素不见了。

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

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

国际电话输入 JQuery 插件 - 在 ajax html 响应后调用设置实例

International Telephone Input JQuery Plugin - Call set instance after ajax html response

html

javascript

jquery

instance-variables

intl-tel-input