Question

我正在使用jquery .load（）函数将外部.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>

这是我正在加载的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>

我的问题是上面的changeLayout函数只能运行＆＃39;一次＆＃39;然后我需要重新加载整个页面才能让它再次运行。

为什么会发生这种情况，我该如何解决这个问题？

Answer 1

您需要将type="button"添加到当前buttons似乎是submitting页面的按钮。

按钮中也不需要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>

将changelayout功能移至nav.html

Answer 2

您应该将脚本放在HTML头部分中。只需在head部分（标题下方）中移动两个脚本标记，就可以了。

我猜你用加载的html文件替换了你身体的内容 - 所以你的所有JavaScript都消失了。

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

2 个答案: