Jquery使面板可见后单击"不工作"

Jquery Click Not working After making Panel Visible

本文关键字：quot 工作 单击 Jquery      更新时间：2023-09-26

我在文本框后面的面板中有一个图像。在页面加载时，面板处于不可见状态。

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

在面板变为可见之后，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
      });
  });

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

您需要使用委派。更改此-

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

到这个-

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

这解释了DOM树中冒泡的事件。

相关文章：