Q:

How convert anonymous jQuery code to named function and call it?

Although I got through this thread regarding above captioned question,but still I am unable to solve my problem.
MY jQuery Code in seperate JS file [test.js]:-
jQuery(document).ready(function($){

$( "#category" ).change('select',function() 
{
    var category_id="category_id="+$("#category").val();

    $.getJSON("get_topic",category_id, function(topic)
    {
        $('#topic').empty();
        $('#topic').append("<option>--- Select Topic ---</option>");

        for(var t in topic) 
        {
            var option = $('<option />');
            option.attr('value', topic[t].id).text(topic[t].name);
            $('#topic').append(option);
        }

    });
});

});
Now I have added this js file in my PHP page header.
<script src="http://localhost.dev/public/js/test.js"></script>
This code is working fine for me. But I have converted this anonymous code to named function addTopic.
My new code modified [test.js]:-:-
 function addTopics() 
 {
    alert ('hi');
    $( "#category" ).change('select',function() 
    {
        var category_id="category_id="+$("#category").val();

        $.getJSON("get_topic",category_id, function(topic)
        {
            $('#topic').empty();
            $('#topic').append("<option>--- Select Quiz Topic ---</option>");

            for(var t in topic) 
            {
                var option = $('<option />');
                option.attr('value', topic[t].id).text(topic[t].name);
                $('#topic').append(option);
            }

        });
    });
 } 

Now I am calling this method in my PHP page:-
<select id="category" class="form-control" onchange="addTopics()" name="category">

Now new code is not working. Please help me on this issue.
Thanks in advance.
Edit:-
Problem Scope:
I have jQuery anonymous code. This is working fine.But I want to convert  that anonymous jQuery code to named jQuery function. So that I can cal that jQuery function,where i need to call it, not automatically.

A:

HTML: 
Do not apply an event handler in your html.. It's just bad practice. Instead just use what you need
<select id="category" class="form-control" name="category">

JS: 
Apply your event handler in your javascript like this:
$("#category").change('select', addTopics);

and define your function seperately as a named function. The event handler will call it now.
function addTopics() 
 {
    alert('hi');
    var category_id="category_id="+$("#category").val();

    $.getJSON("get_topic",category_id, function(topic)
    {
        $('#topic').empty();
        $('#topic').append("<option>--- Select Quiz Topic ---</option>");

        for(var t in topic) 
        {
            var option = $('<option />');
            option.attr('value', topic[t].id).text(topic[t].name);
            $('#topic').append(option);
        }

    });
} 

