JavaScript/jQuery单击函数未在AJAX调用API中触发 [英] JavaScript/jQuery click function not firing in AJAX call to API
问题描述
我正在尝试使用API(在本例中为github)进行练习，以再次以这种方式重新使用JavaScript/jQuery/AJAX ...并使用返回的JSON进行操作很酷.
I am trying to do a practice exercise working with API (the github one in this case) to get re-used to working with JavaScript/jQuery/AJAX in this way again... and doing things with the returned JSON that are (potentially) cool.
我正在repl.it的一个repl上工作-不知道在此处放置该URL是否是犹太洁食(我在这里还是一个新词)，但万一它是:
I'm working in a repl at repl.it -- not sure if it's kosher to put the url for that here (I'm still kind of new here), but in case it is: https://repl.it/@stormy9/SecondWelloffBugs
这样，您就可以运行它，看看我得到了(而不是得到).
That way you can run it and see what I'm getting (and not).
在第一个AJAX调用中，我很好地提取了用户信息，并只选择了要显示的数据并进行显示.
In the first AJAX call, I'm pulling in the user information fine, and picking out just the data I want to display and displaying it.
在第二个AJAX调用中，我的循环提取了整个回购清单，然后我选择并仅显示我要的数据.
In the second AJAX call, my loop is pulling in the whole list of repos, and I'm picking out and showing just the data I asked for as I asked for it.
所有这些都按照我的预期工作.
So all of that is working as I thought it would.
但是...我想-单击按钮时-显示单击了按钮的回购的提交列表.要添加它的想法与我添加回购清单的方式类似，方法是循环遍历返回的JSON并提取要显示的内容.
But... I want to -- when a button is clicked -- show a list of commits for the repo who's button was clicked. The idea being, to append it, in similar fashion to how I appended the list of repos -- by looping through the JSON that is returned and pulling out what I want to display.
这最后一点是行不通的-单击时没有任何反应，除了repl中的console选项卡显示红色的"x"，但没有错误消息.我无法弄清click事件的触发原因.
This last bit is what is not working -- nothing happens when you click, except the console tab in the repl gets a red 'x', but no error message. The click event is not firing for some reason I can't figure out.
我正确地构造了网址，以获取提交列表-因为我可以为每个存储库生成一个链接，单击该链接可以打开相应API结果的新标签.
I have the url formed correctly, to get the list of commits -- because I can produce a link for each repo that when clicked opens up a new tab of the appropriate API results.
这是html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>stormy</title>
<link href="mystyles.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
</head>
<!--------------------------------------------------------------->
<body>
<h3> my github repo list </h3>
<hr>
<div id="error_msg"></div>
<div id="card">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
<div id="repo_list_spot"></div>
</div> <!-- end of 'card' div -->
<hr>
<div id="six"></div>
<div id="seven"></div>
<!----------------------------------------------------->
<script src="myscript.js"></script>
</body>
<!--------------------------------------------------------------->
</html>
这是JavaScript等.
and here is the JavaScript etc.:
$(document).ready(function(){
// vars for the entire `document.ready` function
var baseURL = "https://api.github.com/";
var per_page = "?per_page=100"; // else you just get 1st 30 repos
var userName = "stormy9";
var get_user_json;
var get_repo_list_json;
//=======================================================================
// GET USER INFO/DETAILS
// this is the call to get a list of all repos for a user:
// https://api.github.com/users/Stormy9
// this returns a JSON object -- pull properties outta there
$.ajax({
url: baseURL + "users/"+userName,
type: "GET",
dataType: "json",
//------------------------------------------------------------------
success: function(get_user_info) {
// assign this response to our variable declared up-top.....
// so => save the whole json response here locally
get_user_json = get_user_info;
//--------------------------------------------------------------
var user_name = get_user_info.name;
var user_email = get_user_info.email;
var public_repos = get_user_info.public_repos;
var bio = get_user_info.bio;
var location = get_user_info.location;
$('#one').html("<b>user name = </b>" + user_name);
$('#two').html("<b>email = </b>" + user_email);
$('#three').html("<b># of public repos = </b>" + public_repos);
$('#four').html("<b>user bio = </b>" + bio);
$('#five').html("<b>user location = </b>" + location);
}, // end of GET USER SUCCESS function
//------------------------------------------------------------------
error: function(xhr){
$("#error_msg").text("error getting user details..... " +
xhr.status + " " + xhr.statusText);
}, // end of GET USER ERROR function
}); // end of GET USER AJAX function (like the whole thing)
//=========================================================================
// GET ALL REPOS FOR A GIVEN USER -- then loop thru them
// this is the call to get a list of all repos for a user:
// https://api.github.com/users/stormy9/repos
// this returns an array of JSON objects
//
$.ajax({
url: baseURL + "users/"+userName+"/repos"+per_page,
type: "GET",
dataType: "json",
//------------------------------------------------------------------
success: function(get_users_repo_list) {
// assign response to our variable declared up-top.....
// so => save the whole json response here locally
get_repo_list_json = get_users_repo_list;
//--------------------------------------------------------------
for (var i = 0; i < get_repo_list_json.length; i++)
{
var ordinal = i+1;
var repo_name = get_repo_list_json[i].name; // aka 'CS407'
var repo_url = get_repo_list_json[i].html_url;
var owner = get_repo_list_json[i].owner.login; // aka Stormy9
var updated = get_repo_list_json[i].updated_at;
var repo_av = get_repo_list_json[i].owner.avatar_url;
var list_commits_url = baseURL + "repos/" + userName + "/" + repo_name + "/commits"
// still in our for-loop.....
$("#repo_list_spot").append("<div class='repo_box'>" + ordinal +
"<div class='repo_name'><a href='" + repo_url +
"' target='_blank'>" + repo_name + "</a></div>" +
"<div>" + owner + "</div>" +
"<div><img src='" + repo_av +
"' width='72px' height='72px'></div>" +
"<button type='button' id='list_commits_button'>list commits</button>" +
"<div><a href='" + list_commits_url + "' target='blank'> list commits</a></div>" +
"</div>");
} // end of the for-loop for listing the user's repos.....
//---------------------------------------------------------------
// GET LIST OF COMMITS FOR SPECIFIC REPO BUTTON CLICKED
// this is the call to get a list of all repos for a user:
// https://api.github.com/repos/Stormy9/name_of_repo/commits
// this returns an array of JSON objects
//
$('#list_commits_button').click(function(){
$.ajax({
url: list_commits_url,
type: "GET",
dataType: "json",
//--------------------------------------------------------
success: function(get_commits_list_for_a_repo) {
// assign response to a local variable.....
// so => save the whole json response here locally
var commit_list_json = get_commits_list_for_a_repo;
var stringified_commit_list = JSON.stringify(get_commits_list_for_a_repo, null, 5);
//console.log(get_commits_list_for_a_repo);
console.log(stringified_commit_list);
//---------------------------------------------------
// neither of these work.....
//$('#six').html(get_commits_list_for_a_repo)
$('#six').html(stringified_commit_list);
}, // end of GET COMMIT LIST FOR A REPO SUCCESS function
error: function(xhr) {
$("#error_msg").text("error getting commits..... " +
xhr.status + " " + xhr.statusText);
}, // end of GET COMMIT LIST FOR A REPO ERROR function
}); // end of LIST COMMITS ON A REPO ajax function
}); // end of jQuery CLICK function
//----------------------------------------------------------
}, // end of GET REPO LIST SUCCESS function
error: function(xhr){
$("#error_msg").text("error getting repo list..... " +
xhr.status + " " + xhr.statusText);
}, // end of GET USER ERROR function
}); // end of GET REPO LIST AJAX function
//==================================================================
}); // end of entire jQuery DOCUMENT READY function
这是我 am 所得到的(嗯，部分而言，有41个存储库，但是您知道了):
Here is what I am getting (well, in part, there are 41 repos, but you get the idea):
当您单击列表提交"文本链接时，将打开一个新标签，其中包含正确/预期的API结果.....因此，我构建的uri是正确的.
and when you click on "list commits" text link a new tab opens, with the correct/expected API result..... so the uri I constructed is correct.
但是单击列表提交" 按钮没有任何作用-我只是在repl的控制台"选项卡上看到一个红色的"x"，如下所示: 没有错误消息/反馈.
but clicking the "list commits" button doesn't do anything -- I just get a red 'x' on the console tab of my repl, like so: with no error message/feedback.
我尝试过在各种位置使用单击功能-我认为将按钮放置在创建按钮的位置之后-在success函数内部-最好吗?
I've tried having my click function in various places -- I thought putting it right after where the button is created -- inside that success function -- would be best?
我已经在这里查看了建议的/类似的问题/答案，但是似乎都不合适.....甚至我都不知道Google应该如何寻找可能的解决方案.
I have looked at the suggested/similar questions/answers on here, but none of them seem to fit..... and I'm not even sure what to Google, to find possible solutions.
任何人都可以向我解释为什么我的点击功能没有启动，并向我展示我显然没有想到的解决方案吗?
Can anyone explain to me why my click function is not firing, and show me a solution that I'm apparently not thinking of?
我在第94行固定了"GET"周围的引号(而且我不敢相信我一开始就忽略了这些引号).
I fixed the quotes around "GET" on line 94 (and can't believe I left those off in the first place).
但是，单击按钮时，单击事件仍然不起作用-我只是不再在控制台上看到红色的"x". [=
However, the click event still does nothing when you click the button -- I just don't get a red 'x' on my console anymore. [=
推荐答案
对myscript.js进行以下更改:
Make the follow changes to myscript.js:
在第91行中，您应该更改此代码:
In line 91 you should change this:
$('#list_commits_button').click(function(){
到
$('#list_commits_button').on('click', function(){
因为要在加载页面后创建按钮"#list_commits_button". Doc: https://api.jquery.com/on/
Because you are creating the button "#list_commits_button" after the page has been loaded. Doc: https://api.jquery.com/on/
第94行中的GET带有这样的引号:
And in line 94 be GET with quotes like this:
type: "GET"
这篇关于JavaScript/jQuery单击函数未在AJAX调用API中触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
