JQuery .on（）方法無法與圖像點擊

Question

我試圖用expand/collapse功能實現嵌套的gridview。我的問題是，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(); 
     }); 

GRIDVIEW：

<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（）方法，那麼它的工作原理正好。你們中的任何一位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() {