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

の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（）メソッドを.on（）メソッドを変更した場合、それは動作しますちょうど良い。 jQueryに精通した人達は、私が間違っていることを知っています。ありがとう！

Answer 1

残念ながら.on()は正しく使用されていません。

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

このラインはあなたのイメージ要素は次の2つの選択肢を持っているこの<img alt = "" style="cursor: pointer" src="images/plus.png" />のように書かれているので、それはセレクタ$("[src*=plus]")

の子として<img>タグを探していることを意味します。

1）あなたの<img>は、コードが実行される時にすでに存在している場合することができます簡単な使用

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

2）もしあなた<img>動的に（たとえば、DOMインジェクション）が作成され、すでにあるセレクタを指定する必要がありますプレゼント。

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