collaps和uncollaps在我的脚本中不起作用

时间:2016-11-22 06:51:00

标签: javascript jquery

我在我的项目中使用了Master Nested Grid View,它可以根据其包列出所有Lots,但Collapse / UnCollapses在我的脚本中不起作用

错误是 .live不是一个函数我的Jquery版本不支持我已将其更改为.On但仍然无法正常工作,请检查我的脚本并帮我错误??。

脚本

<script>
    $(document).ready(function () {
        var size = $("#main #gridT > thead > tr >th").size(); // get total column
        $("#main #gridT > thead > tr >th").last().remove(); // remove last column
        $("#main #gridT > thead > tr").prepend("<th></th>"); // add one column at first for collapsible column
        $("#main #gridT > tbody > tr").each(function (i, el) {
            $(this).prepend(
                    $("<td></td>")
                    .addClass("expand")
                    .addClass("hoverEff")
                    .attr('title',"click for show/hide")
                );

            //Now get sub table from last column and add this to the next new added row
            var table = $("table", this).parent().html();
            //add new row with this subtable
            $(this).after("<tr><td></td><td style='padding:5px; margin:0px;' colspan='" + (size - 1) + "'>" + table + "</td></tr>");
            $("table", this).parent().remove();
            // ADD CLICK EVENT FOR MAKE COLLAPSIBLE
            **$(".hoverEff", this).live("click", function () {**
                $(this).parent().closest("tr").next().slideToggle(100);
                $(this).toggleClass("expand collapse");
            });
        });

        //by default make all subgrid in collapse mode
        $("#main #gridT > tbody > tr td.expand").each(function (i, el) {
            $(this).toggleClass("expand collapse");
            $(this).parent().closest("tr").next().slideToggle(100);
        });

    });
</script>

结果 enter image description here

1 个答案:

答案 0 :(得分:0)

不推荐使用

.live并在jquery 1.9及更高版本中将其删除。改为使用.on

$("#gridT").on("click",'.hoverEff',function(){
        $(this).toggleClass("expand collapse");
        $(this).parent().closest("tr").next().slideToggle(100);
});