如何在页面加载时运行函数，然后在单击后运行？

Question

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

Answer 1

Put the code in a named function so you can call it from both places.

 function getFlix(flixAPI) { var Items = ""; $.getJSON(flixAPI, function(data) { $.each(data, function(i, item) { Items += "<div class='img'>"; Items += "<a class='menu-link' 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); }); } $(document).ready(function() { getFlix("https://example.com/api.php?action=MAIN"); $("#content").on("click", ".menu-link", function(e) { e.preventDefault(); getFlix(this.href); }); });

This uses event delegation because the menu links are added dynamically. See Event binding on dynamically created elements?

Answer 2

You would need to identify the menu items with either classes or id's.

Then you would have to define the onClick event for each one of those who you need to fetch the JSON for.

ON the onClick event, you need to use e.stoppropagation or e.preventdefault (check the usage online) and then use ajax to fetch the JSON and populate whatever you are populating.