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

Question

嗨，这是我第一次在任何项目上使用 jquery。如果有人可以的话，我需要一点帮助

在我的页面上，我有一些代码来加载 json 文件，该文件包含主菜单的菜单详细信息，例如

名称/ Action /海报

这是我的代码

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 绑定(bind)中，以根据单击的 href 链接加载下一组项目，但是当我尝试在准备好的文档内部或外部执行此操作时， .click 绑定(bind)函数不起作用

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

这使用事件委托(delegate)，因为菜单链接是动态添加的。请参阅Event binding on dynamically created elements?