将 javascript 更新到最新版本的 JQuery

Question

可能是一个糟糕的标题，但不确定如何陈述问题。

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

在您尝试使用 JQuery v1.10.2 运行它之前，使用示例显示/隐藏嵌套的 gridview 时效果很好。下面的脚本示例使用在 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

你需要使用event delegation方法：

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