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

Question

I have two options where I would like the intl tel input visible. 我想在两个地方看到国际电话输入。 First is hard coded into the html and second when a person selects the number from a drop down menu. 第一个是硬编码到html中，第二个是当人们从下拉菜单中选择数字时。

The first one I have working fine. 我的第一个工作正常。 The second one I am having problems initializing. 第二个我在初始化时遇到问题。

Does anyone know if there is something different I must add to get it to load dynamically? 有人知道我是否必须添加其他内容才能使其动态加载？

Here is my code for both. 这是我的两个代码。

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: 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

What's happening is that you're adding to the DOM but you aren't then initializing the plugin on those newly added elements. 发生的事情是您要添加到DOM但随后又不会在这些新添加的元素上初始化插件。

Try this out. 试试看 Get rid of your double <br> and add margin to the inputs with css. 摆脱双精度<br>并使用CSS将裕度添加到输入中。 It will make managing your html easier as well as your styling. 这将使您管理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 International电话输入

问题描述

1 个解决方案

解决方案1
0 2015-05-05 16:52:36

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

问题描述

1 个解决方案

解决方案1 0 2015-05-05 16:52:36

解决方案1
0 2015-05-05 16:52:36