jQuery function only working once when jquery .load is used

Question

I am using jquery .load() function to load external .html files into my index.html page.

Here is my 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

<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.

Why is this happening and how can I fix this problem?

Mairaj Ahmad · Accepted Answer · 2016-06-21 14:22:14Z

1

You need to add type="button" to your buttons currently your buttons seem to be submitting the page.

Also no need for href attribute in buttons.

<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

edited Jun 21, 2016 at 14:22

answered Jun 21, 2016 at 13:36

Mairaj Ahmad

14.6k2 gold badges29 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Mairaj Ahmad Over a year ago

@estevangomez can u check console if there is any error ?

Mairaj Ahmad Over a year ago

@estevangomez can you show html of you nav page ?

user6295002 Over a year ago

The source code is the same as the one I've posted above in the question. .load() include the html into the DOM so source code will not show the included html

Mairaj Ahmad Over a year ago

But you will have the html of nav.html file can u share that ?

Mairaj Ahmad Over a year ago

OK got it move your function changelayout into nav.html.

|

Eytibi · Accepted Answer · 2016-06-21 13:35:05Z

0

You should place your scripts in the HTML head section. 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.

answered Jun 21, 2016 at 13:35

Eytibi

5456 silver badges12 bronze badges

1 Comment

user6295002 Over a year ago

Tried it and I still have the same issue...Didn't sort the problem

Collectives™ on Stack Overflow

jQuery function only working once when jquery .load is used

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related