用于 intlTelInput 的 jquery 无法添加事件侦听器

Posted 2023-05-09

【中文标题】用于 intlTelInput 的 jquery 无法添加事件侦听器

【英文标题】：jquery for intlTelInput can't add event listener

【发布时间】：2019-06-24 09:57:20

【问题描述】：

尝试执行类似于国家代码侦听器下拉列表的操作，但使用应填充国家代码的文本框（以便我随后可以在 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>

【问题讨论】：

“不起作用”是什么意思。您的代码中在何处/如何触发事件？

不幸的是，它不会触发任何事情。目的是，当我更改 #mobile 字段（即 int-tel-input 字段）上的国家/地区更改时，其下方的文本字段会更改文本。该事件根本没有被触发。

【参考方案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);
        );

【讨论】：

我的 countryData 始终未定义，我尝试在手机输入端调用 getSelectedCountryData 但也未定义

@MohammadAli 分享一些代码可以帮助我们帮助您

jQuery("#mobile").on('countrychange', function(e, countryData) console.log(countryData.dialCode); ) 在日志中给了我未定义的信息。

我必须致电phoneNumberInput.intlTelInput("getSelectedCountryData") 才能获得所选国家/地区的数据

@MohammadAli 我已经编辑了我的答案并附加了工作版本代码