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树的事件。

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

2 个答案: