Javascript 单击事件时多次激发的方法

我正在构建一个web应用程序，用户可以在其中键入任何关键字或语句，并使用WikipediaAPI从wikipedia获取二十个结果。AJAX工作得很好。当web应用程序从wikipedia提取数据时，它应该在动态创建的DIV中显示每个结果

发生的情况是，当触发click事件时，二十个div被创建五次，总共一百次。我不知道为什么，但正如您在下面的代码段中所看到的，当触发click事件时，web应用程序为每个隐藏的DOM元素（通过.hide）创建二十个div

以下是代码：

函数main（）{
函数正（）{
var bar=document.getElementById（“sb”）.childNodes[1]；
var值=bar.value；
如果（！值）{
window.alert（“键入任何内容以开始研究”）；
}否则{
var ex=/\s+/g；
var space_count=值。匹配（ex）；
if（空格_计数==null）{
var new_text=值；
}否则{
新文本=值。替换（例如，“%20”）；
//console.log（新文本）；
}
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（）；
打开（“获取”，url）；
//setRequestHeader（“Api用户代理”，“示例/1.0”）；
request.onload=函数（）{
var data=JSON.parse（request.responseText）；
渲染（数据）；
//控制台日志（数据）；
}
request.send（）；
}
}
函数渲染（数据）{
$（“#first#u h1，#first#u h3，#sb label，#second#u h1，#second#u h3”）。隐藏（“慢速”，函数（）{
$（“#sb输入”）.css({
“浮动”：“左”，
“左边距”：“130像素”
});
$（“#first_btn”）.css({
“浮动”：“左”
});
var title=data.query.search[0]。title；
var new_text=document.createTextNode（标题）；
var new_window=document.createElement（“div”）；
新建窗口。追加子项（新文本）；
新的_window.setAttribute（“类”、“窗口”）；
var position=document.getElementsByTagName（“正文”）[0]；
position.appendChild（新窗口）；
//}
});
}
var first_btn=document.getElementById（“first_btn”）；
第一个添加的事件列表（“单击”，肯定，错误）；
}
$（文件）.ready（主）
html{
字体大小：16px；
}
* {
保证金：0；
填充：0；
框尺寸：边框框；ù
}
.对齐{
文本对齐：居中；
}
#第一组h1{
边缘顶部：30px；
}
#第一单元h3{
边缘底部：30px；
}
#某人{
边缘底部：10px；
}
#第二组h1{
边缘顶部：30px；
}
#第二单元h3{
边缘底部：30px；
}
.窗户{
宽度：70%；
高度：150像素；
边框：3倍纯黑；
保证金：0自动；
边缘顶部：20px；
}

维基百科查看器
维基百科查看器
键入一个关于您所关注主题的关键字，然后查看Wkipedia为您提供了什么。。

你的搜索从这里开始。。。



或
如果你只是渴望随机知识，
点击下面的按钮，看看下一步会是什么。。。


window.jQuery | | document.write（“”）
行：

$("#first_h1, #first_h3, #sb label, #second_h1, #second_h3").hide("slow", function() {})

表示，对于此“列表”中的每个元素，隐藏该元素并在隐藏后运行此代码块。
行：

$("#first_h1, #first_h3, #sb label, #second_h1, #second_h3").hide("slow", function() {})

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..

}

表示，对于此“列表”中的每个元素，隐藏该元素并在隐藏后运行此代码块。
此代码是罪魁祸首：

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..

}

$("#first_h1, #first_h3, #sb label, #second_h1, #second_h3").hide("slow", 
function() {...});

回调函数被调用五次，每列出一个ID调用一次，而不是像您预期的那样，对所有ID调用一次

解决方法是创建一个类（比如“hideme”），将其应用于要隐藏的每个元素，然后编写：

$('.hideme').hide("slow", function() {...});

此代码是罪魁祸首：

$("#first_h1, #first_h3, #sb label, #second_h1, #second_h3").hide("slow", 
function() {...});

回调函数被调用五次，每列出一个ID调用一次，而不是像您预期的那样，对所有ID调用一次

解决方法是创建一个类（比如“hideme”），将其应用于要隐藏的每个元素，然后编写：

$('.hideme').hide("slow", function() {...});

如以下文件所述：

complete：动画完成后调用的函数，每个匹配元素调用一次

这意味着此行将使用5个匹配的元素调用句柄函数5次

$("#first_h1, #first_h3, #sb label, #second_h1, #second_h3").hide("slow", function() {

最简单的解决方案是将渲染代码移到隐藏事件处理程序之外，如中所述：

complete：动画完成后调用的函数，每个匹配元素调用一次

这意味着此行将使用5个匹配的元素调用句柄函数5次

$("#first_h1, #first_h3, #sb label, #second_h1, #second_h3").hide("slow", function() {

最简单的解决方案是将渲染代码移到隐藏事件处理程序之外