Question

我有两个使用脚本函数的事件。如何在加载脚本后才开始使用此功能？

<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/intl-tel-input/js/intlTelInput.js"></script> 
    <script>
        var settings = {
            utilsScript: "../lib/intl-tel-input/js/utils.js",
            initialCountry: "auto",
            geoIpLookup: function (callback) {
                $.get("http://ipinfo.io", function () { }, "jsonp").always(function (resp) {
                    var countryCode = (resp && resp.country) ? resp.country : "";
                    callback(countryCode);
                });
            }
        };
        $("#phoneNumber").intlTelInput(settings);
        $("#viber").intlTelInput(settings);

        $("#phoneNumber").on('input', function (e) {
            var intlNumber = $("#phoneNumber").intlTelInput("getNumber");
            $("#viber").intlTelInput("setNumber", intlNumber);
        });
        $("#phoneNumber").on("countrychange", function (e, countryData) {
            $("#viber").intlTelInput("setCountry", countryData.iso2);
        });
</script>

谷歌Chrome控制台中的

：

Uncaught TypeError: $(...).intlTelInput is not a function

Answer 1

使用$(document).ready(function(){})

<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/intl-tel-input/js/intlTelInput.js"></script> 
<script>
   $(document).ready(function(){  
        var settings = {
            utilsScript: "../lib/intl-tel-input/js/utils.js",
            initialCountry: "auto",
            geoIpLookup: function (callback) {
                $.get("http://ipinfo.io", function () { }, "jsonp").always(function (resp) {
                    var countryCode = (resp && resp.country) ? resp.country : "";
                    callback(countryCode);
                });
            }
        };
        $("#phoneNumber").intlTelInput(settings);
        $("#viber").intlTelInput(settings);

        $("#phoneNumber").on('input', function (e) {
            var intlNumber = $("#phoneNumber").intlTelInput("getNumber");
            $("#viber").intlTelInput("setNumber", intlNumber);
        });
        $("#phoneNumber").on("countrychange", function (e, countryData) {
            $("#viber").intlTelInput("setCountry", countryData.iso2);
        });
   });
</script>

Answer 2

我找到脚本部分的脚本，它解决了问题。

@section Scripts {
        <script src="~/lib/intl-tel-input/js/intlTelInput.js"></script>
        <script>
            $(document).ready(function () {
                var settings = {
                    utilsScript: "../lib/intl-tel-input/js/utils.js",
                    initialCountry: "auto",
                    geoIpLookup: function (callback) {
                        $.get("http://ipinfo.io", function () { }, "jsonp").always(function (resp) {
                            var countryCode = (resp && resp.country) ? resp.country : "";
                            callback(countryCode);
                        });
                    }
                };
                $("#phoneNumber").intlTelInput(settings);
                $("#viber").intlTelInput(settings);

                $("#phoneNumber").on('input', function (e) {
                    var intlNumber = $("#phoneNumber").intlTelInput("getNumber");
                    $("#viber").intlTelInput("setNumber", intlNumber);
                });
                $("#phoneNumber").on("countrychange", function (e, countryData) {
                    $("#viber").intlTelInput("setCountry", countryData.iso2);
                });
            });
        </script>

Answer 3

尝试在jquery下的库中包含“ intlTelInput-jquery.min.js”。它解决了我的问题。

<script src="//cdnjs.cloudflare.com/ajax/libs/intl-tel-input/14.0.6/js/intlTelInput-jquery.min.js"></script>

加载脚本后使用事件

3 个答案: