2 同一页面上的 jQuery 脚本

Question

我在一页 jQuery Dialog 和 jQuery slideToggle 对话框中有 2 个 jQuery 脚本，jQuery 对话框正在工作，但是在对话框内点击按钮打开 jQuery Dialog 后会有一个按钮来滑动 div，但它不工作我试图将 slideToggle 移到对话框之外，它可以工作。如果有人可以帮助我解决我的问题，我不知道对话框内发生了什么

jQuery 对话框

<script type="text/javascript">
    $(function () {
        $("#dialog").dialog({
            appendTo: "form",
            autoOpen: false,
            width: 630,
            height: 700,
            draggable: false,
            resizable: false,
            modal: true
        });


        $("#btnaddnew").click(function () {
            $("#dialog").dialog("open");
            return false;
        });
    });

</script>

jQuery 滑动切换

<script type="text/javascript">
    $(document).ready(function () {
        $("#Div1").hide();
        $("#Button1").click(function () {
            $("#Div1").slideToggle();
            return false;
        });
    });
</script>

jQuery 对话框内的dialog div + slideToggle div

<div id="dialog" title="Classification">
<asp:UpdatePanel ID="addpanel" runat="server">
<ContentTemplate>
<table>
    <tr>

        <td><div id="registerform">
        <table align="center" style="margin-top:10px" width="600">
        <tr>
            <td>
                <asp:DropDownList ID="DropDownList1" runat="server" 
                    onselectedindexchanged="DropDownList1_SelectedIndexChanged" 
                    AutoPostBack="True">
                    <asp:ListItem Selected="True">Choose Classification</asp:ListItem>
                    <asp:ListItem Value="Resident">Resident</asp:ListItem>
                    <asp:ListItem Value="Business">Business</asp:ListItem>
                </asp:DropDownList>
            </td>
        </tr>
        </table>
        <table>
        <tr>
            <td><div id="divresident" runat="server" visible="false">
            <table style="margin-top:10px; margin-bottom:10px">
                <tr>
                    <td width="300" style="text-align:left"><asp:Label ID="lbAddress" runat="server" Text="Address"></asp:Label></td>
                    <td width="300"><asp:TextBox ID="txtAddress" class="basetxt" runat="server" Width="290"></asp:TextBox></td>
                </tr>
                <tr>
                    <td style="text-align:left"><asp:Label ID="lbUserEntry" runat="server" Text="Number of House occupant"></asp:Label></td>
                    <td><asp:TextBox ID="txtUserEntry" class="basetxt" runat="server" Width="290"></asp:TextBox></td>
                </tr>
                <tr>
                    <td style="text-align:left"><asp:Button ID="btnAddOccupant" runat="server" Text="+" />
                    <asp:Label ID="lbres5" runat="server" Text="Add Occupant"></asp:Label></td>
                </tr>
                <tr>
                    <td>
                    <div id="divOccupantProfile" style="display: none">

                    <asp:Label ID="OPfamilyname" runat="server" Text="Family Name"></asp:Label>
                    <asp:TextBox ID="textOPfamilyname" runat="server"></asp:TextBox><br />

                    <asp:Label ID="OPfirstname" runat="server" Text="First Name"></asp:Label>
                    <asp:TextBox ID="textOPfirstname" runat="server"></asp:TextBox><br />

                    <asp:Label ID="OPmiddlename" runat="server" Text="Middle Name"></asp:Label>
                    <asp:TextBox ID="textOPmiddlename" runat="server"></asp:TextBox><br />

                    <asp:Label ID="OPmaritalstatus" runat="server" Text="Marital Status"></asp:Label>
                    <asp:DropDownList ID="ddlOPmaritalstatus" runat="server" >
                        <asp:ListItem></asp:ListItem>
                        <asp:ListItem>Married</asp:ListItem>
                        <asp:ListItem>Single</asp:ListItem>
                        <asp:ListItem>Divorced</asp:ListItem>
                    </asp:DropDownList><br />

                    <asp:Label ID="OPoccupation" runat="server" Text="Occupation"></asp:Label>
                    <asp:TextBox ID="textOPoccupation" runat="server"></asp:TextBox><br />

                    <asp:Label ID="OPrelationship" runat="server" Text="Relationship"></asp:Label>
                    <asp:DropDownList ID="ddlOPrelationship" runat="server" >
                        <asp:ListItem></asp:ListItem>
                        <asp:ListItem>Wife</asp:ListItem>
                        <asp:ListItem>Daughter</asp:ListItem>
                        <asp:ListItem>Son</asp:ListItem>
                        <asp:ListItem>Father</asp:ListItem>
                        <asp:ListItem>Mother</asp:ListItem>
                        <asp:ListItem>House helper</asp:ListItem>
                        <asp:ListItem>Driver</asp:ListItem>
                    </asp:DropDownList>

                    </div>
                    <div id="holder">

                    </div>
                    </td>
                </tr>
            </table>
            </div></td>
        </tr>
        </table>
        <table>
        <tr>
            <td><div id="divbusiness" runat="server" visible="false">
            <table width="600" style="margin-top:10px; margin-bottom:10px">
                <tr>
                    <td width="300" style="text-align:left"><asp:Label ID="lbbus1" runat="server" Text="Registered Business Name" ></asp:Label></td>
                    <td width="300"><asp:TextBox ID="txtbus2" class="basetxt" runat="server" Width="290"></asp:TextBox></td>
                </tr>
                <tr>
                    <td width="300" style="text-align:left"><asp:Label ID="lbbus3" runat="server" Text="Address"></asp:Label></td>
                    <td width="300"><asp:TextBox ID="txtbus4" class="basetxt" runat="server" Width="290"></asp:TextBox></td>
                </tr>
                <tr>
                    <td width="300" style="text-align:left"><asp:Label ID="lbbus5" runat="server" Text="Structure"></asp:Label></td>
                    <td width="300">&nbsp;</td>
                </tr>
                <tr>
                    <td width="300" style="text-align:left"><asp:Label ID="lbbus6" runat="server" Text="SEC No./DTI number"></asp:Label></td>
                    <td width="300"><asp:TextBox ID="txtbus7" class="basetxt" runat="server" Width="290"></asp:TextBox></td>
                </tr>
                <tr>
                    <td width="300" style="text-align:left"><asp:Label ID="lbbus8" runat="server" Text="Nature of Business"></asp:Label></td>
                    <td width="300"><asp:TextBox ID="txtbus9" class="basetxt" runat="server" Width="290"></asp:TextBox></td>
                </tr>
                <tr>
                    <td colspan="2" style="text-align:left">
                    <div>
                    <asp:Button ID="Button1" runat="server" Text="+"  />
                    <asp:Label ID="Label1" runat="server" Text="Add Phone"></asp:Label>
                    <div id="Div1" style="display: none">
                        <asp:Label ID="Label2" runat="server" Text="Landline work"></asp:Label>
                        <asp:TextBox ID="TextBox1" class="basetxt" runat="server" ></asp:TextBox><br />
                        <asp:Label ID="Label3" runat="server" Text="Handphone personal" ></asp:Label>
                        <asp:TextBox ID="TextBox2" class="basetxt" runat="server"></asp:TextBox><br />
                        <asp:Label ID="Label4" runat="server" Text="Handphone work"></asp:Label>
                        <asp:TextBox ID="TextBox3" class="basetxt" runat="server"></asp:TextBox>
                    </div>
                    </div>
                    </td>
                </tr>
            </table>
            </div></td>
        </tr>
        </table>

</table>
</ContentTemplate>
</asp:UpdatePanel>
</div>

Answer 1

.click 对以后加载的元素不起作用，试试这样，替换：

$("#Button1").click(function () {

与：

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