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