ZKF3340320 ZKF3340320 - 13 days ago 5
jQuery Question

collaps and uncollaps is not working in my script

i have used Master Nested Grid View in my project, it can list all Lots based on its Packages, but Collapse/UnCollapses is not working in my script

the error is .live is not a function which is not supported in my Jquery version and i have changed it into .On but still its not working, please check my script and help me whats wrong??.

Scripts

<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>


The result is
enter image description here

Answer

.live is deprecated and removed in jquery version 1.9 and further. use .on instead:

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