Triggering JQuery event on a checkbox inside of .NET repeater

问题

I have a repeater with a checkbox inside of it.

<tr class="datarow">
      <td style="display: none">
           <asp:HiddenField runat="server" ID="hfPortalUserId" Value='<%# Eval("portalUserId") %>' />
      </td>
      <td>
           <asp:TextBox ID="tbUserName" runat="server" Enabled="false" Text='<%# Eval("portalCommonName") %>' Width="98%"></asp:TextBox>
      </td>
      <td>
           <asp:CheckBox ID="chkActive" Enabled="false" runat="server" Checked='<%# IsPortalUserActive((DateTime)Eval("portalUserInactive")) %>' />
      </td>
      <td>
           <asp:CheckBox ID="chkEmployee" Enabled="false" runat="server" Checked='<%# IsEmployee((int)Eval("portalUserTypeId")) %>' />
      </td>
      <td class="checkadmin">
           <asp:CheckBox ID="chkAdmin" Enabled="false" runat="server" Checked='<%# IsAdministrator((int)Eval("siteSecurityRoleId")) %>' CssClass="chkadmin" />
      </td>
      <td>
           <asp:DropDownList ID="ddlUserClient" Enabled="false" runat="server" Width="98%" ></asp:DropDownList>
           <asp:HiddenField runat="server" ID="hfClientId" Value='<%#Eval ("clientId") %>' />
       </td>
       <td>
           <asp:TextBox ID="tbEmail" runat="server" Enabled="false" Text='<%# Eval("portalEmail") %>' Width="98%" AutoCompleteType="None"></asp:TextBox>
       </td>
       <td>
           <asp:TextBox ID="tbPassword" runat="server" Enabled="false"  Width="98%" AutoCompleteType="None" ></asp:TextBox>
            <asp:TextBoxWatermarkExtender ID="wmPass" runat="server" TargetControlID="tbPassword" WatermarkText="Enter new Password"></asp:TextBoxWatermarkExtender>
        </td>
        <td>
            <asp:Panel ID="pnlControls" runat="server" Visible="true">
                <asp:ImageButton ID="btnEdit" ImageUrl="~/Images/Management/EditDocument_20x20.png" runat="server" ToolTip="Update User" CommandName="edit" CausesValidation="false" />
                 <asp:ImageButton ID="btnDelete" ImageUrl="~/Images/Management/Delete_black_20x20.png" runat="server" CommandName="delete" ToolTip="Mark User Inactive" CausesValidation="false" OnClientClick="return confirm('Are you sure you would like to delete this user');" />
             </asp:Panel>
         </td>
</tr>

When the control is rendered the controls are disabled and when the edit button is clicked, the row's controls are enabled. I am trying to use a JQuery selector to catch the Admin checkbox click event and and popup and alert box.

Here is the JQuery code

$("input[id^=BodyLeft_rptUsers_chkAdmin]").change(function () {
    alert('Event Fired');
    if ($(this).is(':checked')) {
        alert('You are about to give administrator privileges. Are you sure?');
    } 
});

If I use IE Developer Tools and run this script after the page render, it works, but otherwise the event doesn't fire and no alert box.

回答1:

Wrap it inside $(function(){ }) which will ensure that the page is loaded before jQuery tries to find the required element.

$(function(){
   $(".chkadmin").click(function () {
       alert('Event Fired');
       if ($(this).is(':checked')) {
          alert('You are about to give administrator privileges. Are you sure?');
       } 
   });
});

来源：https://stackoverflow.com/questions/9115085/triggering-jquery-event-on-a-checkbox-inside-of-net-repeater

标签

jquery

.net

repeater