ajax分页后台返回数据后之前的JS效果失效

[yaotomo]

使用jQuery的pagenav控件 进行ajax分页，后台返回序列化后的JSON字符串，前台反序列化后拼接成table显示到前台
但是原先页面有的tooglefade效果，在返回ajax数据后就看不到了
是不是需要重新对元素的click事件进行绑定才行？

JSON对象拼接字符串的代码

//分页控件pagenav控件初始化
        function navSetting() {
            pageNav.pre = "上一页";
            pageNav.next = "下一页";

            $("#pageNav").click(function () {
                pageNav.fn = function (p, pn) {   //  p:当前页  pn: 总页数. 
                    $.post("./handler/GetNaviateDataHandler.ashx", { "pageid": p,"referer":"datamaintain" }, function (data, status) {
                        $("#uploaddata").html("");
                        var updatas = $.parseJSON(data);
                        
                        var tmain = "";
           
                        for (var i = 0; i < updatas.length; i++) {
                            var updata = updatas[i];
                            var uptype = updata.uplog.typeid == "lg" ? "炼钢成本表" : "轧钢成本表";
                            var uptime = ChangeDateFormat(updata.uplog.uptime);
                            tmain += "<table class='table table-striped'><tbody>";
                            tmain += "<tr><td class='" + updata.uplog.bid + "' colspan='4'>" + updata.uplog.upman + "于" + uptime + "上传" + uptype + "  <span><input type='checkbox' name='check' value='" + updata.uplog.bid + "' /></span> </td></tr>";
                            tmain += "<tr><td><table class='items'><tr class='itemhead'><th>成本中心</th><th>物料ID</th><th>物料描述</th><th>产量</th><th>上传数据</th></tr>";
                            for (var j = 0; j < updata.lstrawdata.length; j++) {
                                var itemdata = updata.lstrawdata[j];
                                tmain += "<tr class='" + itemdata.bid + "'><td></td><td>" + itemdata.costcenter + "</td><td>" + itemdata.matcode + "</td><td>" + itemdata.matdes + "</td><td style='text-align:right'>" + itemdata.product + "</td><td><a href='showdetail.aspx?id=" + itemdata.id + "&type=" + itemdata.typeid + "' target='_blank'><img src='img/view.png' /></a></td></tr>";
                            }
                            tmain += "</table></td></tr></tbody></table>";          
                        }
                                                
                        $("#uploaddata").html(tmain);                     
                    
                    });
                };
            });

            var sumPage = "<% =UpCount.ToString()%>";

             if (parseInt(sumPage) > 1) {
                 pageNav.go(1, parseInt(sumPage));
             }
         }

返回ajax分页数据后失效的JS代码，包括fadeToggle效果，和阻止事件冒泡的代码

$("td[colspan]").click(function () {
                $(".items tr[class=" + $(this).attr("class") + "]").parent().parent().fadeToggle();
            });

            //阻止事件冒泡
            $("td[colspan]").children("span").click(function (e) {

                var e = arguments.callee.caller.arguments[0] || event; //主流浏览器下
                if (e && e.stopPropagation) {
                    // this code is for Mozilla and Opera
                    e.stopPropagation();
                } else if (window.event) {//IE下
                    // this code is for IE 
                    window.event.cancelBubble = true;
                }              
            });

[Ptrtoptr]

对不起,我不会,但我最近名次一直在下降,你明白我的意思吧,

[save4me]

参考官网文档: .live()或中文版.live() 如果你使用的jquery是1.4-1.9版本的，可以使用live绑定事件，因为它

引用

附加一个事件处理器到匹配目前选择器的所有元素，现在和未来。

文档也给出了不同版本等价的方法

引用

$(selector).live(events, data, handler); // jQuery 1.3+ $(document).delegate(selector, events, data, handler); // jQuery 1.4.3+ $(document).on(events, selector, data, handler); // jQuery 1.7+

引用 楼主 yaotomo 的回复:

使用jQuery的pagenav控件 进行ajax分页，后台返回序列化后的JSON字符串，前台反序列化后拼接成table显示到前台 但是原先页面有的tooglefade效果，在返回ajax数据后就看不到了 是不是需要重新对元素的click事件进行绑定才行？

[yaotomo]

[quote=引用 2 楼 save4me 的回复:] 参考官网文档: .live()或中文版.live() 如果你使用的jquery是1.4-1.9版本的，可以使用live绑定事件，因为它 /quote] 我用的是1.8.1的版本 代码改成 $("#pageNav").on("click",function () {} 之后，效果和原来的一样啊,获取数据后原来的tooglefade效果还是没有 之前也用过这种绑定方式，但习惯了原来的.click方式绑定，就没有用on

[save4me]

模拟了数据，做了一个演示代码，实现了你预期的效果，可以点击查看 (点击"获取数据"相当于你的PageNav，模拟动态生成表格；点击"tom于20140101上传轧钢成本表"，即td[colspan]，显示和隐藏表格，点击复选框，只会勾选或取消勾选，不会显示隐藏表格)。 因为jsfiddle.net自带的没有1.8.1的jquery，所以使用了1.8.3的，应该没有什么大的区别。

引用 3 楼 yaotomo 的回复:

[quote=引用 2 楼 save4me 的回复:] 参考官网文档: .live()或中文版.live() 如果你使用的jquery是1.4-1.9版本的，可以使用live绑定事件，因为它 /quote] 我用的是1.8.1的版本 代码改成 $("#pageNav").on("click",function () {} 之后，效果和原来的一样啊,获取数据后原来的tooglefade效果还是没有 之前也用过这种绑定方式，但习惯了原来的.click方式绑定，就没有用on

[rayyu1989]

可以使用jquery的 .on事件绑定到他们共用的父级 如 $(window).on("click","a.btnClose",function(){ //关闭 }); 前提是你的jquery版本高于1.7，拼接字符串肯定会影响传统的绑定方式

[yaotomo]

引用 5 楼 save4me 的回复:

模拟了数据，做了一个演示代码，实现了你预期的效果，可以点击查看 (点击"获取数据"相当于你的PageNav，模拟动态生成表格；点击"tom于20140101上传轧钢成本表"，即td[colspan]，显示和隐藏表格，点击复

谢谢，用您的代码测试成功了 可是为什么我下面的代码就不行呢，必须用$(document).on('click', 'td[colspan]', 才可以？ 稍后就结贴给分

 $("td[colspan]").on("click",function () {
   $(".items tr[class=" + $(this).attr("class") + "]").parent().parent().fadeToggle();
 });

[save4me]

参考: .on()

引用

事件处理只能绑定在当前被选中的元素上;而且，在您的代码调用.on()的时候，他们必须在页面文档中已经存在。 为了确保目前的元素可以被选择的（愚人码头注：即，存在），最好是在 document 的 ready 事件中进行事件绑定。如果新的HTML被注入页面时，新的HTML放置到页面后，事件会绑定到匹配选择器（selector参数）的元素。或者，使用委派事件绑定事件处理程序，如下所述。 委托事件有一个优势，他们能在后代元素添加到文档后，可以处理这些事件。 在确保所选择的元素已经存在的情况下，进行事件绑定时，您可以使用委派的事件，以避免频繁的绑定事件及解除绑定事件。 例如，这个已经存在的元素可以是 Model-View-Controller（模型 - 视图 - 控制器）模式中 View（视图） 的一个容器元素，或document。如果想监视所有文档中的冒泡事件的话。在加载任何其它 HTML 之前，document 元素在 head 中就是有效的，所以您可以安全的在 head 中进行事件绑定，而不需要等待文档加载完。

你可以测试一下，在演示代码最初的dom里面，有td[colspan]节点，所以$("td[colspan]")有效，点击"成本表"的时候，有效果。但是在点击"获取数据"后，这个时候也有td[colspan]，但是$("td[colspan]")这个节点是在domready之后才有的，所以没有效果。如果我们使用document，它在domready的时候就有了，所以一直有效。

引用 6 楼 yaotomo 的回复:

谢谢，用您的代码测试成功了 可是为什么我下面的代码就不行呢，必须用$(document).on('click', 'td[colspan]', 才可以？ 稍后就结贴给分

 $("td[colspan]").on("click",function () {
   $(".items tr[class=" + $(this).attr("class") + "]").parent().parent().fadeToggle();
 });

[yaotomo]

引用 7 楼 save4me 的回复:

你可以测试一下，在演示代码最初的dom里面，有td[colspan]节点，所以$("td[colspan]")有效，点击"成本表"的时候，有效果。但是在点击"获取数据"后，这个时候也有td[colspan]，但是$("td[colspan]")这个节点是在domready之后才有的，所以没有效果。如果我们使用document，它在domready的时候就有了，所以一直有效。

明白了，讲得很细，谢谢指点！

[save4me]

不客气，很高兴问题解决了

引用 8 楼 yaotomo 的回复:

[quote=引用 7 楼 save4me 的回复:] 你可以测试一下，在演示代码最初的dom里面，有td[colspan]节点，所以$("td[colspan]")有效，点击"成本表"的时候，有效果。但是在点击"获取数据"后，这个时候也有td[colspan]，但是$("td[colspan]")这个节点是在domready之后才有的，所以没有效果。如果我们使用document，它在domready的时候就有了，所以一直有效。

明白了，讲得很细，谢谢指点！[/quote]