How to write a Click function of a menu ul li a?

I am working on webapi. I need to get sub-Menus.

I am getting data here from a database (dynamically) as a parameter.

I need to have a click function for the 'Home'. If I click the Home menu I should get the cursor to move to the controller.

CODE

<script type="text/javascript">
    var Url = "/api/MenuItem";
    (function ($) {
        $.buildMenu = function (MenuId, CurrentPage) {
            $.getJSON(Url, function (data) {
                alert(data);
                var item = data;
               
                alert(item.toString());
                $('.' + MenuId).append("<ul>");
                for (var i = 0; i < item.length; i++) {
                    if (CurrentPage == item[i].MenuName)
                        $('.' + MenuId).append('<li><a href="#" class="parent"><span>' + item[i].MenuName + '</span></a></li>');
                    //$('.' + MenuId).append("<li><a  class='main_menu_active'>" + item[i] + "</a></li>");
                    else $('.' + MenuId).append('<li><a href="#" class="parent"><span>' + item[i].MenuName + '</span></a></li>');
                }
            });
        }
    })(jQuery);
    </script>

 // click function
    <script type="text/javascript">
    $(function() {
 // run the currently selected 
      $(".menu li a").click(function(){ 
      alert('1');
            var prodcuts = $(".parent").val();
            $.get("/api/MenuItem", { submenu: prodcuts }, function (data) {
                alert('submenu');
            });
        }); 
        });  
    </script>

//calling script
<script type="text/javascript">
    $(document).ready($.buildMenu("menu", ''));
   </script>

HTML

<div id="menu">
 <ul class="menu">
   </ul>
</div>

I need to create a click function.

Try this one after creating menu

$(".menu li a").bind("click", function_name);