单击事件多次触发方法
[英]Method fired multiple times on click event
问题描述
I'm building a web app in which the user can type in any key word or statement and get in return twenty results from wikipedia using the wikipedia API. 
我正在构建一个Web应用程序，用户可以在其中输入任何关键字或语句，并使用Wikipedia API从Wikipedia返回二十个结果。 AJAX works just fine. AJAX工作正常。 When the web app pulls data from wikipedia it should display each result in a DIV created dynamically. 当Web应用程序从Wikipedia中提取数据时，应在动态创建的DIV中显示每个结果。
What happens is that, when the click event is fired, the twenty DIVs are created five times, so one hundred in total. 发生的情况是，在触发click事件时，会创建五次创建20个DIV，因此总共创建了一百个。 I don't know why but, as you can see in the snippet below, the web app creates twenty DIVs for each DOM element that has been hidden (through .hide) when the click event is fired. 我不知道为什么，但是，如下面的代码片段所示，Web应用程序为在触发click事件时已隐藏（通过.hide）的每个DOM元素创建了20个DIV。
Here's is the code: 这是代码：
function main() { function positive() { var bar = document.getElementById("sb").childNodes[1]; var value = bar.value; if (!value) { window.alert("Type in anything to start the research"); } else { var ex = /\\s+/g; var space_count = value.match(ex); if (space_count == null) { var new_text = value; } else { new_text = value.replace(ex, "%20"); //console.log(new_text); } url = "https://en.wikipedia.org/w/api.php?action=query&format=json&prop=&list=search&continue=-%7C%7C&srsearch=" + new_text + "&srlimit=20&sroffset=20&srprop=snippet&origin=*"; var request = new XMLHttpRequest(); request.open("GET", url); //request.setRequestHeader("Api-User-Agent", "Example/1.0"); request.onload = function() { var data = JSON.parse(request.responseText); render(data); //console.log(data); } request.send(); } } function render(data) { $("#first_h1, #first_h3, #sb label, #second_h1, #second_h3").hide("slow", function() { $("#sb input").css({ "float":"left", "margin-left":"130px" }); $("#first_btn").css({ "float":"left" }); var title = data.query.search[0].title; var new_text = document.createTextNode(title); var new_window = document.createElement("div"); new_window.appendChild(new_text); new_window.setAttribute("class", "window"); var position = document.getElementsByTagName("body")[0]; position.appendChild(new_window); //} }); } var first_btn = document.getElementById("first_btn"); first_btn.addEventListener("click", positive, false); } $(document).ready(main);
html { font-size: 16px; } * { margin: 0; padding: 0; box-sizing: border-box;ù } .align { text-align: center; } #first_h1 { margin-top: 30px; } #first_h3 { margin-bottom: 30px; } #sb { margin-bottom: 10px; } #second_h1 { margin-top: 30px; } #second_h3 { margin-bottom: 30px; } .window { width: 70%; height: 150px; border: 3px solid black; margin: 0 auto; margin-top: 20px; }
<!DOCTYPE html> <html lang="en"> <head> <title>Wikipedia Viewer</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="css/main.css"> </head> <body> <h1 class="align" id="first_h1">Wikipedia Viewer</h1> <h3 class="align" id="first_h3">Type in a key word about the topic you are after<br>and see what Wkipedia has for you..</h3> <p class="align" id="sb"> <input type="text" name="search_box" placeholder="Write here"> <label for="search_box">Your search starts here...</label> </p> <p class="align" id="first_btn"> <input type="submit" value="SEND"> </p> <h1 class="align" id="second_h1">...Or...</h1> <h3 class="align" id="second_h3">If you just feel eager of random knowledge,<br>punch the button below and see what's next for you...</h3> <p class="align" id="second_btn"> <input type="submit" value="Enjoy!"> </p> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> window.jQuery || document.write('<script src="js/jquery-3.2.1.min.js"><\\/script>') </script> <script type="text/javascript" src="js/script.js"></script> </body> </html>
I made the code easier to read by erasing the for loop. 我通过删除for循环使代码更易于阅读。 As you can see, even with just one result, it is displayed five times. 如您所见，即使只有一个结果，它也会显示五次。
Do you know guys why it happens? 你们知道为什么会这样吗？ thanks 谢谢
4 个解决方案
解决方案1
1 已采纳 2017-09-22 17:10:40
The line: 该行：
$("#first_h1, #first_h3, #sb label, #second_h1, #second_h3").hide("slow", function() {})
Says, for every element in this "list", hide the element and run this block of code after hidden. 说，对于此“列表”中的每个元素，隐藏该元素并在隐藏后运行此代码块。
解决方案2
1 2017-09-22 17:19:56
This code is the culprit: 此代码是罪魁祸首：
$("#first_h1, #first_h3, #sb label, #second_h1, #second_h3").hide("slow",
function() {...});
The callback function is called five times, one for each ID listed, not once for all of them, as you might expect. 回调函数被调用了五次，每个列出的ID调用一次，而不是您所期望的所有调用一次。
A workaround is to create a class (say, "hideme"), apply it to each element you want to hide, and write: 一种解决方法是创建一个类（例如“ hideme”），将其应用于要隐藏的每个元素，然后编写：
$('.hideme').hide("slow", function() {...});
解决方案3
0 2017-09-22 17:13:59
function render(data) {
$("#first_h1, #first_h3, #sb label, #second_h1, #second_h3").hide("slow", function() {
$("#sb input").css({
"float":"left",
"margin-left":"130px"
});
$("#first_btn").css({
"float":"left"
});
}); // Finish it here..
var title = data.query.search[0].title;
var new_text = document.createTextNode(title);
var new_window = document.createElement("div");
new_window.appendChild(new_text);
new_window.setAttribute("class", "window");
var position = document.getElementsByTagName("body")[0];
position.appendChild(new_window);
//}
// }); Move this line..
}
解决方案4
0 2017-09-22 17:24:37
As described in the docs : 如文档中所述：
complete : A function to call once the animation is complete, called once per matched element.
Which means this line will call the handle function 5 times with 5 matched elements. 这意味着该行将使用5个匹配的元素调用handle函数5次。
$("#first_h1, #first_h3, #sb label, #second_h1, #second_h3").hide("slow", function() {
The easiest solution is moving the render codes outside of the hide event handler 最简单的解决方案是将呈现代码移到hide事件处理程序之外
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.