JQuery run function on page load and then after click

hi this is my very first time using jquery on any project at all. I am needing a little help if someone can

on my page i have some code to load a json file this file contains menu details for the main menu such as

name / action / poster

this is my code

var Items = "";
var flixAPI = "https://example.com/api.php?action=MAIN";

$.getJSON(flixAPI, function (data) {

    $.each(data, function (i, item) {
        Items += "<div class='img'>";
        Items += "<a target='_blank' href='" + item.ACTION + "'>";
        Items += "<img src='"+ item.POSTER +"' alt='" + item.NAME + "'>";
        Items += "</a>";
        Items += "<div class='desc'>" + item.NAME.substr(0, 16) + "</div>";
        Items += "</div>";
    });

    $('#content').html(Items);

});

i can get this code working when i place it into the document ready.

my issue is after the main menu is populated and added to the page i then need to stop the page redirecting when a href link is clicked and get the value of the href link to then send another get json request to load the next page

i have tried loading the main menu on the document ready and then sticking one call into a .click binding to load the next set of items based on the href link clicked but when i try do this inside or outside the document ready the .click binded function wont work