使用jquery重新绑定事件不起作用
我有一个演示文稿布局的页面设置：
+------------------------+
|prev next|
|+----------------------+|
|| page ||
|| dynamic content ||
|| ||
|+----------------------+|
+------------------------+
在上面的示例中，next / prev是使用$("page").load(url);控制动态内容的导航按钮$("page").load(url);
在其中一个页面上，我有一个弹出窗口，其中包含按钮，它们链接到控制弹出窗口内容的ajax调用。
这些按钮在第一次加载页面时很好地完成了他们的工作。 如果页面被更改（使用导航按钮），然后又改回，弹出窗口将打开，但按钮不起作用。 如果您单击按钮，关闭弹出窗口，然后重新打开弹出窗口，您在第一次点击中请求的信息会显示，但按钮仍然不起作用。
这告诉我，ajax请求很好，在某处绑定元素存在问题。 这是我的Javascript：
$('#resTable').on('click',this,function() {
$('#ayAvgDPm').html("");
$('#aoAvgDPm').html("");
$('#ayTotProfit').html("");
$('#aoTotProfit').html("");
$('#ayAvgPcPm').html("");
$('#aoAvgPcPm').html("");
$('#ayTotPcProfit').html("");
$('#aoTotPcProfit').html("");
$('#ayrRes').html("");
$('#etfProductPopup').bPopup();
});
$('div[class^="sideNav"]').on('click',this,function() {
$('#yrSummary').fadeIn(200);
$('#yAvgDPm').html("");
$('#oAvgDPm').html("");
$('#yTotProfit').html("");
$('#oTotProfit').html("");
$('#yAvgPcPm').html("");
$('#oAvgPcPm').html("");
$('#yTotPcProfit').html("");
$('#oTotPcProfit').html("");
$('#yrRes').html("");
var yr = "20"+$(this).attr('class').substr(-2);
var req = $.ajax({
url : '../includes/prod_results.php',
type : 'POST',
dataType : "json",
data : {
y : yr,
t : 'ETF'
},
success : function(j) {
var table = "<table cellspacing='0'><tr><th>Year</th><th>Returns</th></tr>";
for(var i = 0; i < 12; i++) {
if (i === 5 && yr === '2014'){
break;
}
var obj = j[i];
var month = obj['month'];
var profit = obj['profit'];
var bal = obj['bal'];
table += "<tr><td style='width:75px'>"+month+"</td><td style='padding: 0 15px'>"+parseFloat(profit).toFixed(2)+"%</td><td style='width:75px'>$"+comma(parseFloat(bal).toFixed(2))+"</td></tr>";
if (i === (11)) {
table += "</table>";
}
}
var YAvgDPm = comma(parseFloat(j.YAvgDPm).toFixed(2));
var OAvgDPm = comma(parseFloat(j.OAvgDPm).toFixed(2));
var YTotProfit = comma(parseFloat(j.YTotProfit).toFixed(2));
var OTotProfit = comma(parseFloat(j.OTotProfit).toFixed(2));
var YAvgPcPm = comma(parseFloat(j.YAvgPcPm).toFixed(2));
var OAvgPcPm = comma(parseFloat(j.OAvgPcPm).toFixed(2));
var YTotPcProfit = comma(parseFloat(j.YTotPcProfit).toFixed(2));
var OTotPcProfit = comma(parseFloat(j.OTotPcProfit).toFixed(2));
$('#yAvgDPm').html("$"+YAvgDPm);
$('#oAvgDPm').html("$"+OAvgDPm);
$('#yTotProfit').html("$"+YTotProfit);
$('#oTotProfit').html("$"+OTotProfit);
$('#yAvgPcPm').html(YAvgPcPm+"%");
$('#oAvgPcPm').html(OAvgPcPm+"%");
$('#yTotPcProfit').html(YTotPcProfit+"%");
$('#oTotPcProfit').html(OTotPcProfit+"%");
$('#yrRes').html(table);
$('#yrGraph').html("<img src='../images/graphs/etf_"+yr+".jpg'>");
return false;
}
});
return false;
});
我知道这相当长
我已经在$(document).ready()处理程序内部和外部尝试了上述脚本。
有人可以帮助我，我不做什么？
编辑按要求，HTML：
<table id="resTable" cellspacing="0">
<tr>
<th>Year</th>
<th> 1st Quarter</th>
<th>2nd Quarter</th>
<th>3rd Quarter</th>
<th>4th Quarter</th>
<th>Year Total</th>
<th>Month Avg</th>
</tr>
...
</table>
<div id="etfProductPopup">
<h1 style="text-align:center">ETF - Compounded Results</h1>
<div id="popupLeftBar">
<div class="sideNav14">
2014
</div>
<div class="sideNav13">
2013
</div>
<div class="sideNav12">
2012
</div>
<div class="sideNav11">
2011
</div>
<div class="sideNav10">
2010
</div>
<div class="sideNav09">
2009
</div>
<div class="sideNav08">
2008
</div>
<div class="sideNav07">
2007
</div>
<div class="sideNav06">
2006
</div>
<div class="sideNav05">
2005
</div>
<div class="sideNav04">
2004
</div>
<div class="sideNav03">
2003
</div>
</div>
<div id="popupMain">
<div id="yrSummary">
<table cellspacing="0">
<tr>
<th></th>
<th>Avg<br>$/Mth</th>
<th>Total<br>$ Profit</th>
<th>Avg<br>%/Mth</th>
<th>Total<br>% Profit</th>
</tr>
<tr>
<th>Year</th>
<td id="yAvgDPm"></td>
<td id="yTotProfit"></td>
<td id="yAvgPcPm"></td>
<td id="yTotPcProfit"></td>
</tr>
<tr>
<th>Overall</th>
<td id="oAvgDPm"></td>
<td id="oTotProfit"></td>
<td id="oAvgPcPm"></td>
<td id="oTotPcProfit"></td>
</tr>
</table>
</div>
<div id="yrGraph"></div>
<div id="yrRes"></div>
</div>
真？ 没有任何机构对此有任何其他想法？ 我真的需要你们为我做这件事！
导航按钮代码：
function nav(d) {
n = page + d;
$('#slide').load('p/'+n+'.php');
}
HTML：
<div class="prev" onClick="nav(-1)" title="Previous Page"><< Previous</div>
<div class="next" onClick="nav(1)" title="Next Page">Next >></div>
编辑
所以我已经尝试了所有3个（当前）的答案，并且变得无处可逃！ 这非常令人沮丧！
我开始认为可能存在一些潜在的问题，并且绑定不是完整的问题。
页面显然需要加载，就好像它被浏览器刷新一样。 这个页面在第一次加载时工作得很好，不管它是如何加载的，都告诉我绑定很好。
没有弹出窗口，该页面也可以正常工作。
除绑定外，是否有任何想法可能是潜在的问题？
另外，我知道这是违反SO的规则，我发布了一个链接到有问题的网页，但如果任何人想要一个链接，我绝望地提供它私下。 请问。
编辑
所以，我想，即使在使用下面的脚本之后，隐藏的div（对于弹出窗口）仍然保持填充状态：
$('#etfProductPopup').bPopup({
onClose : function() {
postLoadBindings();
$('#ayAvgDPm').html("");
$('#aoAvgDPm').html("");
$('#ayTotProfit').html("");
$('#aoTotProfit').html("");
$('#ayAvgPcPm').html("");
$('#aoAvgPcPm').html("");
$('#ayTotPcProfit').html("");
$('#aoTotPcProfit').html("");
$('#ayrRes').html("");
}
});
我想这个问题可能与弹出脚本...
https://raw.githubusercontent.com/dinbror/bpopup/master/jquery.bpopup.min.js
编辑
也只是注意到弹出式div在页面加载时被复制。 从控制台：
<div id="etfProductPopup" style="display: none; left: 440px; position: absolute; top: 156px; z-index: 2147483650; opacity: 0;">...</div>
<div id="etfProductPopup" style="display: none; left: 440px; position: absolute; top: 156px; z-index: 2147483650; opacity: 0;">...</div>
编辑
（是的，我意识到如果有'大多数编辑自己的问题'的徽章，那么我会赢，但我认为我提供的数据越多，回复的机会就越大）
我在另一个页面上创建了一个#resTable元素（加载方式与前面相同）。 我注意到，即使在文档就绪处理程序中使用$('#resTable').unbind() ，单击该元素$('#resTable').unbind()弹出前一页的弹出窗口！
这是怎么回事？当剧本的剧本不会出现在这个页面上时，请单独阅读内容？
有人，请！ 这必须有一个合理的解释！ 我不是在编程人类，这是一个计算机代码，这是一些数据的运行，不能随着它的发展而简单化！
有人可以帮助我吗？
知道了这一点： Popup在外部页面（带有导航按钮的页面）中创建了重复的div。 我想它是这样做的，以便它在整个页面上正确分层，而不仅仅是包含div的原始代码的页面。
编辑
更深入地了解正在发生的事情。 弹出窗口显然是在页面内部，而不是容器。 bPopup将div移动到包含页面的<body>标签内。 这意味着在bPopup调用之后导航到的所有页面上都可以使用div。 关闭弹出窗口不会移动div，因此当使用导航按钮重新载入页面时，div将被复制。
最新进展
在向客户说话之后，我不能够直播链接，不幸的是。创建一个jsFiddle需要很长时间。
正如上面的编辑所解释的那样，问题是bPopup在父页面内重新创建弹出窗口div，而不是在弹出窗口关闭时删除它。
我不确定是否有办法删除页面上的元素？ 问题是，如果一个元素可以被删除，那么bpopup创建的副本与原始副本完全相同，因此任何以重复为目标的脚本也会将原始目标
更改：
$('#resTable').on('click',this,function() {
...
至
$(document).on('click','#resTable',function() {
...
和
$('div[class^="sideNav"]').on('click',this,function() {
...
至
$(document).on('click','div[class^="sideNav"]',function() {
...
@Sudhir提到的事件代表团应该已经工作了，但是，如果你面临这个问题，你可能想在每次页面加载的时候强制绑定新的事件。 就像是 -
在主页面上有Prev和Next按钮，定义你所有的功能 -
var bindEvents = function(){
//we are unbinding to make
//sure we are not attaching more than once since
//instead of on, I am using direct CLICK binding.
$('#resTable').unbind("click").click(function() {
....
});
$('div[class^="sideNav"]').unbind("click").click(function() {
....
});
};
var nav = function(d) {
n = page + d;
$('#slide').empty();
$('#slide').load('p/'+n+'.php', function(){
//bind events
bindEvents();
});
}
$(function(){
//the first page call, when page loads
nav(0);
});
请记住，这不是最好的方法，但这将确保其他事情都可以。 如果此绑定起作用，那么我们可以将问题隔离并确认您在使用绑定方式时存在问题。 让我知道它是否仍然无效。
我没有在这方面尝试任何小提琴，但是你是否尝试过将弹出式按钮的事件绑定在ajax请求的“完整”hanlder上？ 确保绑定到单个元素似乎是一种更安全的方法：
var req = $.ajax({
url : '../includes/prod_results.php',
type : 'POST',
dataType : "json",
data : {
y : yr,
t : 'ETF'
},
success : function(j) {
var table = "<table cellspacing='0'><tr><th>Year</th><th>Returns</th></tr>";
for(var i = 0; i < 12; i++) {
if (i === 5 && yr === '2014'){
break;
}
var obj = j[i];
var month = obj['month'];
var profit = obj['profit'];
var bal = obj['bal'];
table += "<tr><td style='width:75px'>"+month+"</td><td style='padding: 0 15px'>"+parseFloat(profit).toFixed(2)+"%</td><td style='width:75px'>$"+comma(parseFloat(bal).toFixed(2))+"</td></tr>";
if (i === (11)) {
table += "</table>";
}
}
var YAvgDPm = comma(parseFloat(j.YAvgDPm).toFixed(2));
var OAvgDPm = comma(parseFloat(j.OAvgDPm).toFixed(2));
var YTotProfit = comma(parseFloat(j.YTotProfit).toFixed(2));
var OTotProfit = comma(parseFloat(j.OTotProfit).toFixed(2));
var YAvgPcPm = comma(parseFloat(j.YAvgPcPm).toFixed(2));
var OAvgPcPm = comma(parseFloat(j.OAvgPcPm).toFixed(2));
var YTotPcProfit = comma(parseFloat(j.YTotPcProfit).toFixed(2));
var OTotPcProfit = comma(parseFloat(j.OTotPcProfit).toFixed(2));
$('#yAvgDPm').html("$"+YAvgDPm);
$('#oAvgDPm').html("$"+OAvgDPm);
$('#yTotProfit').html("$"+YTotProfit);
$('#oTotProfit').html("$"+OTotProfit);
$('#yAvgPcPm').html(YAvgPcPm+"%");
$('#oAvgPcPm').html(OAvgPcPm+"%");
$('#yTotPcProfit').html(YTotPcProfit+"%");
$('#oTotPcProfit').html(OTotPcProfit+"%");
$('#yrRes').html(table);
$('#yrGraph').html("<img src='../images/graphs/etf_"+yr+".jpg'>");
return false;
},
complete:function(){
//put the bindings to popup here
}
});