div内容更改功能无法识别

Question

Hello & thanks for your time!

I'm trying to set up buttons for categories that when clicked load that categories first item in the vis Contained div. Then 'next' and 'prev' buttons in the loaded div data that switch to other items in that category.

So far I have:

php:

<nav>
    <button onclick="changeContent('content1')">content1</button>
</nav>
<section id="main">
    <div id="visContainer"><div>
    </div>
</section

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/js/jquery.min.js"><\/script>')</script>
<script src="js/javascript.js"></script>

js:

    $(function(){
        function changeContent(content){
            $('#visContainer').load('divList.html' content);
    };
});

along with a divList.html file that has different divs listed (filled w text for now). I'm getting an 'Unexpected identifier' on the function changeContent line in the js and it keeps saying changeContent is not defined (when button clicked). I thought it may be something to do with my declaration or the jQuery but I can't figure out where. I'm new to this so any help would be much appreciated!

Answer 1

$(function(){ ... });

That function creates a new scope, making changeContent unavailable in the window scope where your inline event handler lives. Quick fix would be :

$(function(){
    window.changeContent = function(content){
        $('#visContainer').load('divList.html' content);
    }
});

A better solution would be to remove the inline event handler.

<button id="myButton">content1</button>

and JS:

$(function(){
    $('myButton').on('click', function() {
        $('#visContainer').load('divList.html #content1');
    });
});