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

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函数仅能“一次”运行，然后我需要重新加载整个页面才能使其再次运行。

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

Answer 1

您需要在type="button"添加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头部分中。 只需将两个脚本标签移动到头部（标题下方），就可以了。

我猜您是用已加载的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