面板可见后，Jquery Click无法工作

Question

我有一个图像在面板上的文本框。在页面加载时，面板是不可见的。

在下拉列表中选择值后，面板将变为可见。

在面板变得可见后，Jquery图像单击不起作用。

我正在使用UpdatePanel进行下拉列表回发，这会是原因吗？

如果没有，如何解决这个问题？

 <tr>
      <td colspan="2" class="invisible">
         <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
             <ContentTemplate>
                 <asp:Panel runat="server" ID="pnlMonitor" Width="100%" Visible="false" CssClass="panelstyle" >
                   <table style="width: 100%">
                      <tr>
                         <td>Periodic Review Admin:<span style="color: red">*</span>
                          </td>
                          <td>
                          <asp:TextBox runat="server" ID="txtPeriodicReviewAdmin" CssClass="text ui-widget-content ui-corner-all" MaxLength="50"></asp:TextBox>
                      <img src="../Images/Binoculars.png" id="imgPRAdmin" />
                          </td>
                        </tr>
                      </table>
                    </asp:Panel>
                 </ContentTemplate>
               <Triggers>
                 <asp:AsyncPostBackTrigger ControlID="ddlMonitor" EventName="SelectedIndexChanged" />
                </Triggers>
           </asp:UpdatePanel>
       </td>
    </tr>


 $("#imgPRAdmin").click(function (e) {              
      $("#divSearch").dialog({
          open: function () {
              $(this).closest(".ui-dialog")
              .find(".ui-dialog-titlebar-close")
              .removeClass("ui-dialog-titlebar-close");
          },
          title: "Search Employee",
          show: "fade",
          modal: true,
          width: '55%',
          height: 500
      });
  });

Answer 1

UpdatePanel将替换DOM元素，因此click()将只订阅原始的DOM元素。当UpdatePanel用新项目刷新自己的内容时，它将替换DOM元素，它们将不需要单击订阅。

您需要使用on函数。在以前的jQuery版本中，它是live，但后来被弃用

 $("body").on('click', "#imgPRAdmin", function (e) {              
      $("#divSearch").dialog({
          open: function () {
              $(this).closest(".ui-dialog")
              .find(".ui-dialog-titlebar-close")
              .removeClass("ui-dialog-titlebar-close");
          },
          title: "Search Employee",
          show: "fade",
          modal: true,
          width: '55%',
          height: 500
      });
  });

Answer 2

您需要使用委托。改变这个-

$("#imgPRAdmin").click(function (e) {        

对这个-

$("body").on('click', '#imgPRAdmin', function (e) {    

这解释了事件在DOM树上冒泡的原因。