Laravel 5.6：与App.js的intl-tel-input兼容性问题

我有一个Laravel 5.6网页，我想添加IntlTelInput（https://github.com/jackocnr/intl-tel-input），但我尝试从源码，作曲家和npm（目前使用composer和mix复制构建文件夹）安装它，其中3个似乎没有初始化插入 .

• 这不是我的浏览器（尝试了很多，它在codepen中工作）

• 我安装了Jquery

• 我收录了样式表

• 我覆盖CSS中的flags.png路径（在HTML和app.scss中[并运行npm run watch]）

• 我在输入后添加了intlTelInput.js脚本

• 我用 <script>$("#phone").intlTelInput();</script> 初始化输入（在DOM中输入后）

这是我从检查结果得到的：

<div class="intl-tel-input allow-dropdown">
       <div class="flag-container">
          <div tabindex="0" class="selected-flag">
             <div class="iti-flag"></div>
             <div class="iti-arrow"></div>
          </div>
          <ul class="country-list hide">
             <li data-dial-code="1" data-country-code="us" class="country preferred">
                <div class="flag-box">
                   <div class="iti-flag us"></div>
                </div>
                <span class="country-name">United States</span><span class="dial-code">+1</span>
             </li>
             <li data-dial-code="44" data-country-code="gb" class="country preferred">
                <div class="flag-box">
                   <div class="iti-flag gb"></div>
                </div>
                <span class="country-name">United Kingdom</span><span class="dial-code">+44</span>
             </li>
             <li class="divider"></li>
             <li data-dial-code="93" data-country-code="af" class="country ">
                <div class="flag-box">
                   <div class="iti-flag af"></div>
                </div>
                <span class="country-name">Afghanistan (‫افغانستان‬‎)</span><span class="dial-code">+93</span>
             </li>
             <li data-dial-code="355" data-country-code="al" class="country ">
                <div class="flag-box">
                   <div class="iti-flag al"></div>
                </div>
                <span class="country-name">Albania (Shqipëri)</span><span class="dial-code">+355</span>
             </li>
             <li data-dial-code="213" data-country-code="dz" class="country ">
                <div class="flag-box">
                   <div class="iti-flag dz"></div>
                </div>
                <span class="country-name">Algeria (‫الجزائر‬‎)</span><span class="dial-code">+213</span>
             </li>

....

                <span class="country-name">Western Sahara (‫الصحراء الغربية‬‎)</span><span class="dial-code">+212</span>
             </li>
             <li data-dial-code="967" data-country-code="ye" class="country ">
                <div class="flag-box">
                   <div class="iti-flag ye"></div>
                </div>
                <span class="country-name">Yemen (‫اليمن‬‎)</span><span class="dial-code">+967</span>
             </li>
             <li data-dial-code="260" data-country-code="zm" class="country ">
                <div class="flag-box">
                   <div class="iti-flag zm"></div>
                </div>
                <span class="country-name">Zambia</span><span class="dial-code">+260</span>
             </li>
             <li data-dial-code="263" data-country-code="zw" class="country ">
                <div class="flag-box">
                   <div class="iti-flag zw"></div>
                </div>
                <span class="country-name">Zimbabwe</span><span class="dial-code">+263</span>
             </li>
             <li data-dial-code="358" data-country-code="ax" class="country ">
                <div class="flag-box">
                   <div class="iti-flag ax"></div>
                </div>
                <span class="country-name">Åland Islands</span><span class="dial-code">+358</span>
             </li>
          </ul>
       </div>
       <input name="phone" id="phone" placeholder="Phone" value="9992715671" required="required" autocomplete="off" class="form-control" type="text">
    </div>

当我从ul class =“country-list hide”手动删除hide类时，它会出现，但我无法与它进行交互，看来js无法正常工作我猜 .

如果我删除“隐藏”会发生什么：

UPDATE:

做更多的测试我意识到，如果我注释掉“app.js”脚本，intl-tel-input工作正常，那么我现在的问题是，我需要在App.js中进行哪些更改才能使其工作？ （我没有向app.js添加任何内容，它与每个laravel安装相同）