Как я могу запустить функцию при загрузке страницы, а затем после нажатия?

Question

привет, это мой самый первый раз, когда я использую jquery в любом проекте. Мне нужна небольшая помощь, если кто-то может

на моей странице, у меня есть некоторый код для загрузки файла json, этот файл содержит подробности меню для главного меню, такие как

name / action / poster

это мой код

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);

});

я могу заставить этот код работать, когда я помещаю его в документ готовым.

моя проблема - после заполнения главного меню и после добавления на страницу мне нужно остановить перенаправление страницы при нажатии на ссылку href и получить значение ссылки href, чтобы затем отправить еще один запрос get json для загрузки следующей страницы

я пробовал загрузка главного меню в документ готова, а затем вставка одного вызова в привязку .click для загрузки следующего набора элементов на основе нажатой ссылки href, но когда я пытаюсь сделать это внутри или снаружи документа, готовая связанная функция .click не будет работать

Answer 1

Поместите код в именованную функцию, чтобы вы могли вызывать ее из обоих мест.

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);
  });
});

При этом используется делегирование событий, поскольку ссылки меню добавляются динамически. См. Привязка событий к динамически создаваемым элементам?

Answer 2

Вам нужно будет идентифицировать пункты меню либо по классам, либо по идентификаторам.

Затем вам нужно будет определить событие onClick для каждого из тех, для кого вам нужно получить JSON для.

В случае события onClick вам необходимо использовать e.stoppropagation или e.preventdefault (проверить использование онлайн), а затем использовать ajax, чтобы получить JSON и заполнить все, что вы заполняете.