title: How to get click event using Jquery when control is in UpdatePanel in asp.net?
body: <p>I have three <code>div</code> div1,div2div3 containing <code>DataList</code> control in each <code>div</code>. When i click on item in <code>DataList1</code> then <code>DataList2</code> will be loaded asynchronously which in UpdatePanel of <code>div2</code>. </p>
  
  <p><strong>Problem:</strong>
  When i click on control in <code>DataList2</code> and try to access the <code>Clicked Control Class</code> using <code>jquery</code> it wont fire the <code>Click</code> event. Any idea?</p>
  
  <p>Sample output:</p>
  
  <p><img src="https://i.stack.imgur.com/45vim.png" alt="enter image description here"></p>
  
  <p><strong>Jquery Script:</strong></p>
  
  <pre><code>$('.imgOpaLevel2').click(function() {
                  alert("hi");
      //not able to get this message when clicked on DataList2 in div2 which is in updatepanel
  
  }
  </code></pre>
  
  <p><strong>Here is the ASP.NET Markup:</strong></p>
  
  <pre><code>&lt;div id="divLevel1" class="banner-sec"&gt;
              &lt;div class="banner-bg-strip"&gt;
  
              &lt;asp:DataList ID="dtDevice" runat="server" DataKeyField="DeviceID" DataSourceID="sqlDeviceList"
                  RepeatColumns="5" RepeatDirection="Horizontal" ItemStyle-VerticalAlign="Top"
                  OnItemCreated="dtDevice_ItemCreated" OnItemCommand="dtDevice_ItemCommand"&gt;
                  &lt;ItemTemplate&gt;
                      &lt;asp:HiddenField ID="hdnDeviceID" runat="server" Value='&lt;%# Eval("TronixDeviceID") %&gt;' /&gt;
                      &lt;ul class="unstyled clearfix iphone-banner-img-sec"&gt;
                          &lt;li&gt;&lt;a href="#url"&gt;
                              &lt;div class="banner-img-sec"&gt;
                                  &lt;asp:ImageButton ID="ImgDeviceImage" ImageUrl='&lt;%#  Eval("DeviceImage") %&gt;' CommandName="CategoryID" CommandArgument='&lt;%# Eval("CategoryID") %&gt;' class="imgOpaLevel1"
                                      alt="" RowID='&lt;%# Container.ItemIndex + 1 %&gt;' title='&lt;%# Eval("DeviceName") %&gt;'
                                      runat="server" Width="109" Height="196" /&gt;
                              &lt;/div&gt;
                              &lt;div class="banner-pro-img-txt"&gt;
                                  &lt;asp:Label ID="lblDisplayText" runat="server" Text='&lt;%# Eval("DeviceName") %&gt;' Width="114"
                                      Height="20" /&gt;
                              &lt;/div&gt;
                          &lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/ItemTemplate&gt;
              &lt;/asp:DataList&gt;
              &lt;asp:SqlDataSource ID="sqlDeviceList" runat="server" ConnectionString="&lt;%$ ConnectionStrings:MyConnString %&gt;"
                  SelectCommand="p_GetDeviceList" SelectCommandType="StoredProcedure"&gt;
                  &lt;SelectParameters&gt;
                      &lt;asp:Parameter DefaultValue="1" Name="CategoryID" Type="Int32" /&gt;
                  &lt;/SelectParameters&gt;
              &lt;/asp:SqlDataSource&gt;
  
          &lt;/div&gt;
  
          &lt;div class="container position-relative margintop_25"&gt;
              &lt;div id="divLevel2" class="iphone-tab-main-sec" style="display: none;"&gt;
                  &lt;div id="divtopArrow" class="input-tab-arrow iPhones"&gt;
                  &lt;/div&gt;
                  &lt;div id="fadediv" class="iphone-tab-sec iphone5-2-sec"&gt;
                     &lt;asp:UpdatePanel runat="server" ID="updatePanelLevel2"&gt;
                          &lt;Triggers&gt;
                          &lt;/Triggers&gt;
                          &lt;ContentTemplate&gt;
                              &lt;asp:DataList id="dlCarreirList" runat="server" DataKeyField="CarrierID" 
                                  RepeatColumns="5" RepeatDirection="Horizontal" 
                                  ItemStyle-VerticalAlign="Top" onitemcreated="dlCarrerList_ItemCreated"&gt;
                                  &lt;ItemTemplate&gt;
                                      &lt;asp:HiddenField ID="hdnCarrerID" runat="server" Value='&lt;%# Eval("CarrierID") %&gt;' /&gt;
                                      &lt;ul class="unstyled clearfix" style="height:164px;"&gt;
                                          &lt;li&gt;&lt;a href="#url"&gt;
                                              &lt;div class="iphone5-2-pro-img"&gt;
                                                  &lt;asp:ImageButton ID="ImageButton1" ImageUrl='&lt;%#  Eval("CarrierImg") %&gt;' class="imgOpaLevel2"
                                                      alt="" RowID='&lt;%# Container.ItemIndex + 1 %&gt;' title='&lt;%# Eval("Carrier") %&gt;'
                                                      runat="server" /&gt;
                                                  &lt;div class="iphone-pro-img-txt"&gt;
                                                      &lt;asp:Label ID="lblDisplayText" runat="server" Text='&lt;%# Eval("Carrier") %&gt;'/&gt;
                                                   &lt;/div&gt;
                                          &lt;/a&gt;&lt;/li&gt;
                                      &lt;/ul&gt;
                                  &lt;/ItemTemplate&gt;
                              &lt;/asp:DataList&gt;
                              &lt;asp:Label ID="lbltest" runat="server" Text="Hello" Width="114" Height="20" Visible="false" /&gt;
                         &lt;/ContentTemplate&gt;
                      &lt;/asp:UpdatePanel&gt;
  
  &lt;div id="Level3"&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>In .cs file:</strong></p>
  
  <pre><code>protected void dtDevice_ItemCreated(object sender, DataListItemEventArgs e)
      {
          var control = e.Item.FindControl("ImgDeviceImage");
          ScriptManager.GetCurrent(Page).RegisterAsyncPostBackControl(control);
      }
      protected void dtDevice_ItemCommand(object source, DataListCommandEventArgs e)
      {
          lbltest.Text = "hi";
          int categoryid = 0;
          if (e.CommandName != null)
          {
              if (e.CommandName == "CategoryID")
              {
                  categoryid = Convert.ToInt32(e.CommandArgument);
                  GetCarrerMasterList(categoryid);
              }
          }
      }
      protected void dlCarrerList_ItemCreated(object sender, DataListItemEventArgs e)
      {
          var control = e.Item.FindControl("ImageButton1");
          ScriptManager.GetCurrent(Page).RegisterAsyncPostBackControl(control);
      }
      protected void GetCarrerMasterList(int categoryid)
      {
          iPhoneBiz Objiphone = new iPhoneBiz();
          Objiphone.CarrierID = categoryid;
  
          DataTable dtCarrierList = Objiphone.GetTronixCarrierList();
          if (dtCarrierList != null &amp;&amp; dtCarrierList.Rows.Count &gt; 0)
          {
              dlCarreirList.DataSource = dtCarrierList;
              dlCarreirList.DataBind();
          }
  
  
      }
  </code></pre>
  
  <p><strong>Updated:</strong></p>
  
  <pre><code>$(document).on('mouseenter', '.imgOpaLevel2', function() {
      alert("iElement ID:"+this);
      $('.imgOpaLevel2').stop().animate({ opacity: 1.0 }, 200);
      $(this).hover(
                     function() {
                         $('.imgOpaLevel2').stop().animate({ opacity: 0.5 }, 200);
                         $(this).stop().animate({ opacity: 1.0 }, 200);
                         if (selectedImgIDLevel2 != null) {
  
                             $('.imgOpaLevel2').stop().animate({ opacity: 0.5 }, 200);
  
                             $("#" + selectedImgIDLevel2).stop().animate({ opacity: 1.0 }, 200);
                         }
                         else {
  
                             //nothing
                         }
                     }, 
                     function() {
  
                         if (selectedImgIDLevel2 == null || selectedImgIDLevel2 == undefined) {
                             $('.imgOpaLevel2').stop().animate({ opacity: 1.0 }, 200);
                         }    //this will reset Opacity on Mouseout
  
                     })
      });
  </code></pre>