单击事件多次触发方法
[英]Method fired multiple times on click event
问题描述
我正在构建一个Web应用程序，用户可以在其中输入任何关键字或语句，并使用Wikipedia API从Wikipedia返回二十个结果。 AJAX工作正常。 当Web应用程序从Wikipedia中提取数据时，应在动态创建的DIV中显示每个结果。
发生的情况是，在触发click事件时，会创建五次创建20个DIV，因此总共创建了一百个。 我不知道为什么，但是，如下面的代码片段所示，Web应用程序为在触发click事件时已隐藏（通过.hide）的每个DOM元素创建了20个DIV。
这是代码：
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>
我通过删除for循环使代码更易于阅读。 如您所见，即使只有一个结果，它也会显示五次。
你们知道为什么会这样吗？ 谢谢
4 个解决方案
解决方案1
1 已采纳 2017-09-22 17:10:40
该行：
$("#first_h1, #first_h3, #sb label, #second_h1, #second_h3").hide("slow", function() {})
说，对于此“列表”中的每个元素，隐藏该元素并在隐藏后运行此代码块。
解决方案2
1 2017-09-22 17:19:56
此代码是罪魁祸首：
$("#first_h1, #first_h3, #sb label, #second_h1, #second_h3").hide("slow",
function() {...});
回调函数被调用了五次，每个列出的ID调用一次，而不是您所期望的所有调用一次。
一种解决方法是创建一个类（例如“ 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
如文档中所述：
complete ：动画完成后调用的函数，每个匹配元素调用一次。
这意味着该行将使用5个匹配的元素调用handle函数5次。
$("#first_h1, #first_h3, #sb label, #second_h1, #second_h3").hide("slow", function() {
最简单的解决方案是将呈现代码移到hide事件处理程序之外
在 keyup 事件中分配 click 事件处理程序会导致多次触发 click 事件
[英]Assigning click event handler inside keyup event causes the click event to be fired multiple times
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.