Twitter Bootstrap和选择的jQuery插件不起作用

发布时间：2020-12-17 21:29:33 所属栏目：安全来源：网络整理

导读：我正在使用Twitter Bootstrap Chosen. 我正在选择Chosen进行选择,但它不起作用(如同,它使用Twitter Bootstrap样式),直到您点击页面中通过Ajax抓取另一个页面(订单表单)的链接.通过Fancybox显示它;此页面也使用了选择.单击后,选择正确地应用于选择. 页面的头

我正在使用Twitter Bootstrap Chosen.

我正在选择Chosen进行选择,但它不起作用(如同,它使用Twitter Bootstrap样式),直到您点击页面中通过Ajax&抓取另一个页面(订单表单)的链接.通过Fancybox显示它;此页面也使用了选择.单击后,选择正确地应用于选择.

页面的头部看起来相同;首先调用jQuery,jQuery的其他插件(用于滑块的UI)工作正常.选择的路径是正确的.删除Bootstrap进行测试没有帮助(它只是在抓取订单页面之前显示没有样式.

解决方法

我使用Twitter Bootstrap和Chosen很长一段时间下降.我从未遇到过这样的问题.您可以在引导CSS或缺少/覆盖样式之前插入所选的CSS.这是完整的工作代码……

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

        <meta charset="utf-8" />

        <!-- scale the devices -->
        <meta name="viewport" content="width=device-width,initial-scale=1.0" />

        <!-- include bootstrap css files -->
        <link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.css" />
        <link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap-responsive.css" />

        <title>Twitter Bootstrap + Choosen</title>

        <!--[if lt IE 9]>
            <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->        

        <!-- includ jquery and bootstrap script -->
        <script type="text/javascript" src="//code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript" src="/bootstrap/js/bootstrap.js"></script>

        <!-- choosen -->
        <link rel="stylesheet" type="text/css" href="/chosen/chosen.css" />
        <script type="text/javascript" src="/chosen/chosen.jquery.min.js"></script>

        <script type="text/javascript">
        $(document).ready( function() { 
            // chosen select
            $("form select").chosen({no_results_text: "No results matched"});
        });
        </script>
    </head>

    <body>
        <!-- container -->
        <div class="container">

            <!-- content -->
            <div class="row">
                <div class="span12">
                    <!-- user form -->
                    <form method="post" action="" class="form-horizontal">
                        <div class="control-group">
                            <label for="group_id" class="control-label">User Group : </label>
                            <div class="controls">
                                <select name="group_id" id="group_id" class="input-xlarge">
                                    <option value="">select...</option>
                                    <option value="1">Administrator</option>
                                    <option value="3"selected="selected">Users</option>
                                    <option value="4">Random</option>
                                    <option value="5">Super New</option>
                                    <option value="6">Famous</option>
                                </select>
                            </div>
                        </div>
                    </form>
                    <!-- // end form -->
                </div>
            </div>
            <!-- // end content -->

        </div>
        <!-- // end container -->
    </body>
</html>

这里是图像附件/截图(原样)

希望这可以帮助.谢谢！！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!