如何在脚本中使用多个scr属性

时间:2018-01-16 16:17:53

标签: javascript html element

我们正在生成一些带有烧瓶和jinja的html,最后我们在html的两个不同的地方采购jquery,一部分是在python视图中生成并通过,另一部分来自模板,< / p>

一个脚本元素在表元素/标记内,另一个脚本元素在主体内部,

如果正文中的那个被取消注释,我们会收到错误&#34; SCRIPT438:对象不支持属性或方法&#39; tablesorter&#39;&#34;而我认为是因为上课的表格在上面?并且可能像python一样,函数需要首先存在于上面,所以我们可以使用它。 因为如果将它移到身体顶部并不重要,如果重复,一切都有效。  有没有办法告诉html使用脚本表,表中的所有内容?

是否有类似技巧可以指定要使用的脚本的路径?或者想要由图书馆使用的元素?

当网站使用2个不同版本的jquery或其他库时会发生什么?

谢谢你们,我很感激帮助=)

这是一个例子:

<body>
<!--if is at the top of the body also everything works-->
<!--<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon">
    <link rel="icon" href="/static/favicon.ico" type="image/x-icon">

<div class="container-fluid">
    <div class="page-header"> <h1>PRESENTATION</h1> </div>

    <div class="row">
        <div class="col-sm-12">
            <table class="table table-striped table-condensed tablesorter" id="total_table">
            <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
            <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.29.2/js/jquery.tablesorter.js">                    </script>
            <script>
                $(document).ready(function()
                {
                   $('#total_table')
                   .tablesorter({
                       ignoreCase: false,
                       widthFixed: true,
                       sortResetKey: 'ctrlKey',
                       headerTemplate : '{icon}{content}',
                       theme : "bootstrap",
                       }
                   )
                });
            </script>
            <thead>
                <tr>
                    <th>
                        <p>
                            my values
                        </p>
                    </th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>
                        <p>
                            17
                        </p>
                    </td>
                </tr>
                <tr>
                    <td>
                        <p>
                            10
                        </p>
                    </td>
                </tr>
                <tr>
                    <td>
                        <p>
                            5
                        </p>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>





    <!--if i comment next line website works and i can sort the table-->
    <!--but if i have it here doesnt work =(-->
    <!--how can i have it in 2 places? or tell the first one just to affect that table or div?-->
<!--<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>-->

<script>
    $(document).ready(function() {
        console.log("this function is working")
    });
</script>

</div>
</body>

1 个答案:

答案 0 :(得分:-2)

使用jQuery.noConflict,您可以在同一页面上使多个版本的jQuery共存。例如

<script src='jquery-1.3.2.js'></script>
<script>
var jq132 = jQuery.noConflict();
</script>
<script src='jquery-1.4.2.js'></script>
<script>
var jq142 = jQuery.noConflict();
</script>