javascript - 使用 jquery 重新绑定(bind)事件不起作用-6ren

javascript - 使用 jquery 重新绑定(bind)事件不起作用

转载作者：数据小太阳更新时间：2023-10-29 04:47:50

我有一个用于演示布局的页面设置:

+------------------------+
|prev                next|
|+----------------------+|
||         page         ||
||   dynamic content    ||
||                      ||
|+----------------------+|
+------------------------+

在上面的例子中，next/prev 是使用 $("page").load(url); 控制动态内容的导航按钮。

在其中一个页面上，我有一个弹出窗口，其中包含链接到控制弹出窗口内容的 ajax 调用的按钮。

当页面第一次加载时，这些按钮可以很好地完成它们的工作。如果页面被更改(使用导航按钮)然后又改回来，弹出窗口将打开但按钮不起作用。如果您单击按钮，关闭弹出窗口，然后重新打开弹出窗口，您在第一次单击时请求的信息会显示，但按钮仍然不起作用。

这告诉我ajax请求没问题，某处元素的绑定(bind)有问题。这是我的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">&lt;&lt; Previous</div>
<div class="next" onClick="nav(1)" title="Next Page">Next &gt;&gt;</div>

编辑

所以我已经尝试了所有 3 个(当前)答案，但一无所获!这非常令人沮丧!

我开始认为可能存在一些潜在的问题，并且绑定(bind)不是完整的问题。

页面显然需要像浏览器刷新一样加载。页面在第一次加载时运行良好的事实，不管它是如何加载的，对我来说绑定(bind)都很好。

该页面在没有弹出窗口的情况下也能正常工作。

除了绑定(bind)之外，还有什么想法可能是潜在的问题吗？

另外，我知道发布指向相关网页的链接是违反 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()在文档就绪处理程序中，单击该元素会弹出上一页的弹出窗口!

当弹出窗口的脚本甚至不存在于该页面上时，这怎么可能，更不用说内容了？

有人，请!对此必须有一个合理的解释!我不是要给人类编程，这是一个计算机代码，它运行着一些数据，不能简单地随着它的进行而编造!

有人可以帮我解决这个问题吗？

到此为止: Popup 在外页面(带有导航按钮的页面)内创建重复的 div。我想这样做是为了让它在整个页面上正确分层，而不仅仅是包含 div 原始代码的页面。

编辑

更深入地了解正在发生的事情。弹出窗口的 div 显然在页面内，而不是容器内。 bPopup 正在将 div 移动到 <body> 内包含页面的标签。这意味着 div 在 bPopup 调用后导航到的所有页面上都可用。关闭弹出窗口不会将 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() {
...

关于javascript - 使用 jquery 重新绑定(bind)事件不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24482778/

文章推荐： javascript - 如何制作逼真的轮盘赌球旋转动画

文章推荐： c# - C#中的低通和高通滤波器

文章推荐： c# - 在 2 个 dll 中具有命名空间名称的不明确类

实例分析Try {} Catch{} 作用
今天有小伙伴给我留言问到，try{...}catch(){...}是什么意思？它用来干什么？简单的说他们是用来捕获异常的下面我们通过一个例子来详细讲解下
html - 列表社交媒体链接的 ARIA 作用
我正在努力提高网站的可访问性，但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接，因
java.util.Timer SystemTime 作用？
说现在是 6 点，我有一个 Timer 并在 10 点安排了一个 TimerTask。之后，System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
php - 什么是 Doctrine hydration 作用？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
python入门:argparse浅析 nargs='+'作用
我就废话不多说了，大家还是直接看代码吧~ ? 1
Maven是什么?Maven的概念+作用+仓库的介绍+常用命令的详解
Maven系列1 1.什么是Maven？ Maven是一个项目管理工具，它包含了一个对象模型。一组标准集合，一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。核心功能 Mav

数据小太阳

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 使用 jquery 重新绑定(bind)事件不起作用