jQuery函数仅在使用jquery .load时工作一次

Question

I am using jquery .load() function to load external .html files into my index.html page. 我正在使用jquery .load（）函数将外部.html文件加载到我的index.html页面中。

Here is my index.html: 这是我的index.html：

index.html index.html

<!doctype>
<html>
<head>

    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">    

</head>

<body>

    <div id="nav"></div>





<script src="jquery/jquery.min.js"></script>


<script>


    $(function() {

        $("#nav").load("nav.html");

    });



    function changeLayout(layout) {

        if(layout == '4') {

    $("[class^='col-md-']").removeClass (function (index, css) {
        return (css.match (/(^|\s)col-md-\S+/g) || []).join(' ');
    }).addClass("col-md-4");



} else

        if(layout == '6') {

    $("[class^='col-md-']").removeClass (function (index, css) {
        return (css.match (/(^|\s)col-md-\S+/g) || []).join(' ');
    }).addClass("col-md-6");



}

else

        if(layout == '12') {

    $("[class^='col-md-']").removeClass (function (index, css) {
        return (css.match (/(^|\s)col-md-\S+/g) || []).join(' ');
    }).addClass("col-md-12");



}

}


</script>




</div>

</body>
</html>

This is the nav.html file that I'm loading: 这是我正在加载的nav.html文件：

nav.html nav.html

<div id="subnav" class="container">
    <div class="row">
        <div class="btn-wrapper">
            <div class="layout">
                <button onclick="changeLayout('4');">Layout1</button>
                <button onclick="changeLayout('6');">Layout1</button>
                <button onclick="changeLayout('12');">Layout1</button>
            </div>
        </div>
    </div>
</div>

My problem is that the changeLayout function above will only work 'Once' and then I would need to reload the whole page to get it to work again. 我的问题是，上面的changeLayout函数仅能“一次”运行，然后我需要重新加载整个页面才能使其再次运行。

Why is this happening and how can I fix this problem? 为什么会发生这种情况，如何解决此问题？

Answer 1

You need to add type="button" to your buttons currently your buttons seem to be submitting the page. 您需要在type="button"添加type="button" ，当前您的buttons似乎正在submitting页面。

Also no need for href attribute in buttons. 也不需要按钮中的href属性。

<button type="button" onclick="changeLayout('4');">Layout1</button>
<button type="button" onclick="changeLayout('6');">Layout1</button>
<button type="button" onclick="changeLayout('12');">Layout1</button>

Move you changelayout function to nav.html 将您的changelayout函数移至nav.html

Answer 2

You should place your scripts in the HTML head section. 您应该将脚本放在HTML头部分中。 Just move both of your script tags in the head section (below title) and you should be fine. 只需将两个脚本标签移动到头部（标题下方），就可以了。

I guess you replaced the content of your body with the loaded html file - so all your JavaScript was gone. 我猜您是用已加载的html文件替换了您的身体内容-因此您所有的JavaScript都消失了。

jQuery函数仅在使用jquery .load时工作一次

问题描述

2 个解决方案

解决方案1
2 已采纳 2016-06-21 13:36:58

解决方案2
0 2016-06-21 13:35:05

jQuery函数仅在使用jquery .load时工作一次

问题描述

2 个解决方案

解决方案1 2 已采纳 2016-06-21 13:36:58

解决方案2 0 2016-06-21 13:35:05

解决方案1
2 已采纳 2016-06-21 13:36:58

解决方案2
0 2016-06-21 13:35:05