如何在页面加载时运行功能，然后在点击后运行？答案

【问题标题】：How can I run a function on page load and then after click?如何在页面加载时运行功能，然后在点击后运行？
【发布时间】：2023-03-25 22:32:01
【问题描述】：

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

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

名称/动作/海报

这是我的代码

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 绑定功能不起作用

【问题讨论】：

将代码放在一个以flixAPI为参数的命名函数中。在文档准备好期间和从点击处理程序中调用它。
@barmar 你能举个小例子吗，我可以在更像是一个视觉学习者的时候使用 satb，但作为我第一次使用 jquery，我什至不知道要搜索什么出这种东西

标签： javascript jquery html

【解决方案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);
  });
});

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

【讨论】：

谢谢你试一试看看效果如何我可以得到主菜单项的href 加载后没问题我的问题只是在主菜单加载后我点击一个项目我的点击绑定从来没有被调用过我在文档内部和外部都试过了
我刚刚意识到这一点并更新了答案以展示如何使用动态链接来做到这一点。
这似乎不起作用:(让我看看我是否可以在 jsfiddle 上创建一个示例
我在preventDefault 中有错字。您没有收到错误消息说该功能不存在吗？
不，我在 ftp 客户端中编辑自己的文件，将其直接保存到服务器，然后在更改代码以更正拼写后在 Opera 浏览器中测试页面，停止导航到新选项卡的操作是工作，所以我知道代码现在很好，我认为我自己的问题是在我单击的页面中获取元素的 href 我现在可以获取元素的 href var Action = $(this).find('a: first').attr('href');

【解决方案2】：

您需要使用类或 ID 来识别菜单项。

然后，您必须为需要为其获取 JSON 的每个人定义 onClick 事件。

在 onClick 事件上，您需要使用 e.stoppropagation 或 e.preventdefault（在线检查使用情况），然后使用 ajax 获取 JSON 并填充您要填充的任何内容。

【讨论】：