动态加载带有标志和拨号代码的 jQuery 国际电话输入答案

【问题标题】：Loading jQuery International Telephone Input With Flags and Dial Codes Dynamically动态加载带有标志和拨号代码的 jQuery 国际电话输入
【发布时间】：2015-07-15 12:32:49
【问题描述】：

我有两个选项，我希望 intl tel 输入可见。首先是硬编码到 html 中，其次是当人们从下拉菜单中选择数字时。

第一个我工作得很好。第二个我在初始化时遇到问题。

有谁知道我是否必须添加一些不同的东西才能使其动态加载？

这是我的代码。

HTML：

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <!-- JQuery -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

    <!-- International Phone Input -->
    <link rel="stylesheet" href="build/css/intlTelInput.css">
    <script src="build/js/intlTelInput.js"></script>

    <title>Test Page</title>

    <!-- Custom -->
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>

</head>

<body>
    <label>Phone Number:</label>
    <br>
    <br>
     <label class='phoneDiv'></label><input id="phone" type="tel"
      form='form1'>

    <br>
    <br>

    <label>Number of Stores:</label>

                    <br>
                    <br>

                <div class='storeSpecifcs'>

               <select id="numberOfStores">
                   <option value="5"># of Stores</option> 
                   <option value="1">1</option>
                    <option value="2">2</option>
                </select>

                    <br>
                    <br>

                <div class='storeSpecifcsContainer'></div>

                </div> 

</body>
</html>

jQuery:

$(document).ready(function () {

    $("#phone").intlTelInput({
        utilsScript: "lib/libphonenumber/build/utils.js"
    });

$("#phone1").intlTelInput({
            utilsScript: "lib/libphonenumber/build/utils.js"
        });

$("#phone2").intlTelInput({
            utilsScript: "lib/libphonenumber/build/utils.js"
        });

    $("#numberOfStores").change(function () {
        $('.storeSpecifcsContainer').empty();
        var number = $("#numberOfStores option:selected").text();
        var htmlToInsert = "";
        for (var i = 1; i <= number; i++) {
            htmlToInsert = '<input id="phone' + i + '" type="tel" form="form1"><br><br>';
            $(".storeSpecifcsContainer").append(htmlToInsert);


        }
    });

});

【问题讨论】：

标签： jquery html input

【解决方案1】：

发生的情况是您正在添加到 DOM，但您并没有在这些新添加的元素上初始化插件。

试试这个。摆脱你的双 <br> 并使用 css 为输入添加边距。它将使管理您的 html 以及您的样式更容易。

for (var i = 1; i <= number; i++) {
    //create it as a jquery object
    htmlToInsert = $('<input id="phone' + i + '" type="tel" form="form1">');
    $(".storeSpecifcsContainer").append(htmlToInsert);
    //you can probably do this before you add it to the DOM
    //initialize the plugin on the new object
    htmlToInsert.intlTelInput({
        utilsScript: "lib/libphonenumber/build/utils.js"
    });
}

【讨论】：

您好，谢谢您的回答。我尝试了代码，但它对我来说不起作用。我用这个脚本初始化插件： $("#phone2").intlTelInput({utilsScript: "lib/libphonenumber/build/utils.js"}); “#phoneX”是动态加载的 ID，但它没有正确定位 ID。我最终做的是： $('body').on('click', '#phone1', function () { $('#phone1').intlTelInput({utilsScript: "lib/libphonenumber/build/ utils.js"}); });哪个有效，但是您必须单击输入才能显示格式，这有点烦人...