将javascript更新到最新版本的JQuery

Question

可能是一个可怕的头衔,但不知道如何陈述问题.

我正在创建一个嵌套的gridview.我使用的示例来自:http://www.aspsnippets.com/Articles/ASPNet-Nested-GridViews-GridView-inside-GridView-with-Expand-and-Collapse-feature.aspx

在使用示例显示/隐藏嵌套gridview时,它会很有用,直到您尝试使用JQuery v1.10.2运行它.下面的脚本示例使用在v1.7 +中折旧的.live.所以我按照建议更新到.on.问题是脚本的"减号"确实是"删除".似乎发生的是"加"功能似乎再次触发.

这是原作:

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

而她就是我的更新方式

    <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();
            });
        });

但仍然没有去.看起来好像$("[src*= plus]")一遍又一遍.

图像从加号更改为负号.

Answer 1

您需要使用事件委派方法:

$(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();
            });
        });