Question

我有两个选项，我希望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);


        }
    });

});

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

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

1 个答案: