javascript - jquery for intlTelInput 无法添加事件监听器

Question

尝试执行类似于国家/地区代码监听器下拉列表的操作，但使用应填充国家/地区代码的文本框(以便我随后可以在 PHP 代码中使用该值)。

添加事件监听器不起作用:

<script>

$(document).ready(function(){

    $("#mobile").intlTelInput({
			onlyCountries: ["au","ca","us","nz","gb"],
    	utilsScript: "<?php echo get_template_directory_uri(); ?>/intl-tel-input/build/js/utils.js",
    	geoIpLookup: function(callback) {
		  	$.get("https://ipinfo.io", function() {}, "jsonp").always(function(resp) {
		    	var countryCode = (resp && resp.country) ? resp.country : "";
		    	callback(countryCode);
		  	});
		},
    	initialCountry: "auto"
    }).addEventListener('countrychange', function() {
			$("#country_code").value = "changed"
		});;

    $('#verify').attr('disabled','disabled');
    $("#mobile").on('input', function() {
    	if ($("#mobile").intlTelInput("isValidNumber")) {
			$('#verify').removeAttr('disabled');
			$("#country_code").innerHTML = "changed"
    	} else {
    		$('#verify').attr('disabled','disabled');
    	}

    });

    $("#register-form").submit(function() {
		$("#mobile").val($("#mobile").intlTelInput("getNumber"));

	});
});
</script>

Answer 1

也许，自从您提出这个问题以来已经有几个月了，下面是解决方案。

您误解了addEventListener。这可以是任何其他 Javascript 框架的函数。但不是 jQuery 的。

初始化后使用以下代码作为脚本。您可以使用 countryData.dialCode 执行您想要的操作，它会为您提供国家/地区代码。

jQuery("#mobile").on('countrychange', function(e, countryData){
    console.log(countryData.dialCode);
})

下面是 intlTelInput 返回的示例 countryData。

{ areaCodes: null, dialCode: "44", iso2: "gb", name: "United Kingdom", priority: 0 }

我的工作版本是(这是基于 Intelinput 的 jQuery 库版本)

var mobile_with_country_code = '<?php echo $mobile_with_country_code; ?>';
        
        var mobile_number_input = document.querySelector("#mobile");

        mobile_number = window.intlTelInput(mobile_number_input, {
            initialCountry: "ae",
            separateDialCode: true,
            preferredCountries: ["ae","bh","kw","om","qa","sa"],
        });

        if(mobile_with_country_code != ''){
            mobile_number.setNumber(mobile_with_country_code);
        }

        jQuery('#country_code').val(mobile_number.getSelectedCountryData().dialCode);

        mobile_number_input.addEventListener("countrychange", function() {
          jQuery('#country_code').val(mobile_number.getSelectedCountryData().dialCode);
        });