JQuery .on() 方法不适用于图像点击

Question

我正在尝试实现具有展开/折叠功能的嵌套网格视图。我的问题是 jQuery 点击功能不起作用。场景如下：

jQuery:

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

网格视图：

<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false"
        DataKeyNames="Id" OnRowDataBound="OnRowDataBound">
        <Columns>
            <asp:TemplateField>
                <ItemTemplate>
                    <img alt = "" style="cursor: pointer" src="images/plus.png" />
                    <asp:Panel ID="pnlOrders" runat="server" Style="display: none">
                        <asp:GridView ID="gvOrders" runat="server" AutoGenerateColumns="false">
                            <Columns>
                                <asp:BoundField ItemStyle-Width="150px" DataField="Id" HeaderText="Order Id" />
                                <asp:BoundField ItemStyle-Width="150px" DataField="Policy" HeaderText="Date" />
                            </Columns>
                        </asp:GridView>
                    </asp:Panel>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:BoundField ItemStyle-Width="150px" DataField="Id" HeaderText="Contact Name" />
            <asp:BoundField ItemStyle-Width="150px" DataField="Name" HeaderText="City" />
        </Columns>
    </asp:GridView>

现在，如果我用 .live() 方法更改 .on() 方法，那么它工作得很好。任何精通 jQuery 的人都知道我做错了什么。谢谢！

Answer 1

很遗憾，您没有正确使用.on()。

$("[src*=plus]").on("click", "img", function () {

这行意味着它正在寻找<img>标签作为选择器$("[src*=plus]")的子标签

由于您的图像元素是这样写的<img alt = "" style="cursor: pointer" src="images/plus.png" />，您有两个选择；

1) 如果您的<img> 在代码执行时已经存在，您可以简单地使用

$("img[src*=plus]").on("click", function () {

2) 如果您的 <img> 是动态创建的（例如 dom 注入），您需要指定一个已经存在的选择器。像这样的：

$("body).on("click", "img[src*=plus]", function () {