Update javascript to newest version of JQuery

Question

Probably a terrible title but wasn't sure how to state the issue.

I am working on creating a nested gridview. I am using an example from: http://www.aspsnippets.com/Articles/ASPNet-Nested-GridViews-GridView-inside-GridView-with-Expand-and-Collapse-feature.aspx

It works great when using the example to show/hide the nested gridview until you try to run it with JQuery v1.10.2. The below script example uses .live which was depreciated in v1.7+. So I updated to .on as recommended. The problem is the "minus" of the script does "remove". What seems to be happen is the "plus" function seems to trigger again.

Here is the original:

        <script type="text/javascript">
        $(document).ready(function () {
            $("[src*=plus]").live("click", function () {
                $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
                $(this).attr("src", "../App_Themes/Theme1/minus.png");
            });
            $("[src*=minus]").live("click", function () {
                $(this).attr("src", "../App_Themes/Theme1/plus.png");
                $(this).closest("tr").after.remove();
            });
        });
</script>

and her is how I updated

    <script type="text/javascript">
        $(document).ready(function () {
            $("[src*=plus]").on("click", function () {
                $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
                $(this).attr("src", "../App_Themes/Theme1/minus.png");
            });
            $("[src*=minus]").on("click", function () {

                $(this).attr("src", "../App_Themes/Theme1/plus.png");
                $(this).closest("tr").after.remove();
            });
        });

but still no go. Again is seems as though $("[src*=plus]") just fires over and over.

The image is update from plus to minus.

Answer 1

You need to use event delegation method:

$(document).ready(function () {
            $(document).on("click", "[src*=plus]", function () {
                $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
                $(this).attr("src", "../App_Themes/Theme1/minus.png");
            });
            $(document).on("click", "[src*=minus]", function () {
                $(this).attr("src", "../App_Themes/Theme1/plus.png");
                $(this).closest("tr").after.remove();
            });
        });