嗨,这是我第一次在任何项目上使用 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)函数不起作用
最佳答案
将代码放入命名函数中,以便您可以从两个地方调用它。
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?
关于javascript - 如何在页面加载时运行函数,然后在单击后运行函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59887629/