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

Question

trying to do something similar to the country code listener drop down but with a text box which should populate with the country code (so that I can subsequently use the value in PHP code).

Adding the event listener doesn't work:

 <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

Maybe, it has been months since you asked this question, below is the solution.

You misunderstood the addEventListener . This could be a function of any other Javascript framework. But not jQuery's.

User the below code as a script after the initialization. You can do what your you want with countryData.dialCode which gives you the country code.

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

Below is the sample countryData which the intlTelInput returns.

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

My working version is (this is based on with jQuery library version of Intelinput)

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