Javascript 多次触发JQuery单击事件
我知道这里已经有很多关于被触发的多个点击事件的报道,我想我已经读了所有这些,但仍然看不出这里出了什么问题 完全希望我错过了一些明显的东西,其他人可以很容易地捡到 一些背景 我的代码在一个企业社交网络平台中工作,并创建了一个BI仪表板,用于对1000行内容进行内容分析,大部分是特定于领域的,所以太多了,无法完整发布 导致我悲伤的部分是构建仪表板可视化本身的功能 这是Javascript 多次触发JQuery单击事件,javascript,jquery,event-handling,click,Javascript,Jquery,Event Handling,Click,我知道这里已经有很多关于被触发的多个点击事件的报道,我想我已经读了所有这些,但仍然看不出这里出了什么问题 完全希望我错过了一些明显的东西,其他人可以很容易地捡到 一些背景 我的代码在一个企业社交网络平台中工作,并创建了一个BI仪表板,用于对1000行内容进行内容分析,大部分是特定于领域的,所以太多了,无法完整发布 导致我悲伤的部分是构建仪表板可视化本身的功能 这是 function makePage(){ $("#policyCount").text(policyCount); var d
function makePage(){
$("#policyCount").text(policyCount);
var docTypes=getGlobalDocTypes(polOwners); //returns a constrained vocab array
var statusTypes=getGlobalStatusTypes(polOwners); //returns a constrained vocab array
$.each(polOwners,function(){ // polOwners is a global array that contains the BI data to be visualised
html=""
var ownerName = this.name.split(":")[1]; // name is a str in format "Owner:HR"
html += "<div id='" + ownerName + "' class='ownerData'>";
html += "<div class='ownerHeading'>" + ownerName + "</div>";
html += this.policies.length + " Policy documents maintained<br />"; // policies is an array of docs managed by owner
divIDReview = "dboard_" + ownerName + "reviewchart";
html += "<div id='" + divIDReview + "' class='dboardelement'></div>";
divIDType = "dboard_" + ownerName + "typechart";
html += "<div id='" + divIDType + "' class='dboardelement'></div>";
divIDStatus = "dboard_" + ownerName + "statuschart";
html += "<div id='" + divIDStatus + "' class='dboardelement'></div>";
html += "<div id='" + ownerName + "ToggleTable' class='toggletable' owner='" + ownerName + "'>";
html += "Click to display all " + ownerName + " documents<br /></div>";
html += "<div id='" + ownerName + "polTable' class='poltable'>";
html += getPolTable(this.policies); // Returns an HTML table of doc metadata
html += "</div>";
html += "</div>";
$("#owners").append(html); // When this function is called #owners is an empty div
$(".toggletable").mouseover(function(){
$(this).css({'cursor':'pointer','text-decoration':'underline'});
});
$(".toggletable").mouseout(function(){
$(this).css( {'cursor':'default','text-decoration':'none'});
});
$(".toggletable").each(function(i, elem){
$(elem).click(function(){
if ($(this).next(".poltable").css("display")=="none"){
// Currently hidden - so show
if (debug){console.log($(this).attr("id") + " was clicked")}
$(this).html("Click to hide " + $(this).attr('owner') + " documents<br/>");
$(this).next(".poltable").css("display","block");
} else {
if (debug){console.log($(this).attr("id") + " was clicked")}
$(this).html("Click to display all " + $(this).attr('owner') + " documents<br />");
$(this).next(".poltable").css("display","none");
}
});
});
// the next section calls functions that use the Google vis api to draw pie charts
drawPie(300,200, "Review Status", "Status", "Policies", getReviewStatus(this.policies), ["green","orange","red"], divIDReview);
drawPie(300,200, "Document Types", "Type", "Docs", getDocTypes(this.policies, docTypes), [], divIDType);
drawPie(300,200, "Document Status", "Status", "Docs", getStatusTypes(this.policies, statusTypes), [], divIDStatus);
});
}
希望这足以说明这个问题
您将看到,代码为每个polOwner构建了一个仪表板显示,包括三个饼图和一个隐藏或显示底层数据表的选项
我首先将click事件应用于.toggletable类。当它多次触发时,我使用了另一个答案中描述的方法。each将一个唯一的事件附加到类的每个实例
那么,会发生什么
目前有9个polOwners,乍一看,单击事件似乎只是切换其他每个表的显示状态。然而,控制台日志显示,这是因为第一个实例触发9次,第二个实例触发8次,第三个实例触发7次等。当奇数离开表格处于备用状态时,显示将更改为.toggle动画
作为一名文本编辑人员,我有一份MS Expression Web 4的副本,这是一个用于检查HTML错误的有用工具。我已经粘贴了整个生成的标记的一个副本,将近4000行,没有看到任何错误的嵌套或结构错误
各位有什么想法吗?您有一些嵌套循环:
// jQuery each on polOwners
$.each(polOwners,function(){
// ... code that appends .toggletable class
// jQuery each on .toggletable class
$(".toggletable").each(function(i, elem){
// code that runs on the toggletable element
});
});
对于每个PoloOwner,您将使用toggletable类添加一个div。然后在其中,您使用一个可切换类在每个div中循环,并添加一个click事件
这将为第一个polOwner添加1次单击,为第二个添加2次单击,为第三个添加3次单击,依此类推
将切换表移动到polOwner的每个外部,你应该会很好没有读太多,但是你认为这与在每个函数内部的每个函数中粘贴单击处理程序有关吗?+1问题是循环,但是单击处理程序已经使用了很多,您可能认为,像您这样的人很容易通过直接应用于类的click处理程序生成一个解决方案,而不是将它放在每个循环中,以这种方式应用于每个元素?噢!不断地把头撞在桌子上,羞愧地走开了……是的,就是这样。现在效果很好。这是一个很好的例子,说明了这个社区的好处——我已经盯着这段代码看了好几个小时,搜索一些复杂的东西,但完全没有看到$%%^$%明显的内容。谢谢大家-太好了++