jquery - asp.netで作成されたボタンをクリックしてもボタンonclickがトリガーされない（div.innerhtmlをhtml文字列に変更）

Question

だから、基本的に質問はタイトルにあります、

ログイン用のdiv（loginDiv内のloginP）があります。ユーザーがログインすると、loginPのinnerHtmlがAsp.net経由で変更されます。また、jqueryを使用して、サイトのユーザーがloginDiv（loginPを含む）を上下に移動できるようにします。これは重要なことかもしれません。

コードの通常のhtml部分は次のとおりです。

<div id="loginDiv" runat="server">
        <div id="loginP" runat="server">
            username:<br />
            <asp:TextBox runat="server" ID="user" Rows="1" class="textboxL" /><br />
            password:<br />
            <asp:TextBox TextMode="Password" runat="server" ID="pass" Rows="1" class="textboxL" /><br />
            <div id="bottomDiv">
                <asp:Button ID="RegiButton" runat="server" UseSubmitBehavior="false" CssClass="buttonC"
                    Text="Register" OnClick="RegisterBtnClick" />
                <asp:Button ID="LogButton" runat="server" UseSubmitBehavior="true" CssClass="buttonC"
                    Text="Login" OnClick="LoginBtnClick" /><br />
                <asp:CheckBox runat="server" ID="rememberME" />
                <p id="rememberMe">
                    <font size="1" face="verdana">remember me</font>
                </p>
                <asp:Label Width="180px" Height="40px" Visible="true" runat="server" Text="" ID="errorLabel" />
            </div>
        </div>
    </div>

これがjqueryの部分です

    var ldiv = $("#loginDiv");
ldiv.offset({ top: 10 });


var drag = { y: 0, state: false };
var delta = { y: 0 };


$("#user").mousedown(function () {
    drag.state = false;
    $("#user").focus()
});
$("#pass").mousedown(function () {
    drag.state = false;
    $("#pass").focus()
});
//$("#LogOutBtn").mousedown(function () {
//    drag.state = false;
//    return false;
//});
$(document).ready(function () {
    $("#LogOutBtn").click(function () {
        $.ajax({
            type: "POST",
            url: "sMaster.Master/LogoutBtnClick",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
        });
    });
});



ldiv.mousedown(function (e) {
    if (!drag.state == true) {
        drag.y = e.pageY;
        drag.state = true;
    }
    return false;
});

$(document).mousemove(function (e) {
    if (drag.state == true) {
        delta.y = e.pageY - drag.y;
        var cur_offset = $("#loginDiv").offset();

        if (ldiv.cssNumber("top") + $("#loginP").cssNumber("padding-top") + delta.y > -40 && ldiv.cssNumber("top") + $("#loginP").cssNumber("padding-top") + $("#loginP").cssNumber("height") + delta.y + 60 < $(window).height()) {
            if ($(window).width() >= 1305) {
                $("#loginDiv").offset({ top: (cur_offset.top + delta.y) });
                drag.y = e.pageY;
            }
        }

    }
});

$(document).mouseup(function () {
    drag.state = false;
});


$("#user").mousedown(function () {
    drag.state = false;
    $("#user").focus()
});
$("#pass").mousedown(function () {
    drag.state = false;
    $("#pass").focus()
});

また、ウィンドウが小さすぎる場合にloginDivを移動するjQueryコードのこの部分もあります。

    $(document).ready(function () {
    var dLeft = $("#greenPart").width();
    dLeft += ($(window).width() - $("#greenPart").width()) / 2;
    dLeft += 10;
    $("#loginDiv").css("marginLeft", dLeft);

    var he = $(window).height() * 2;
    $("#loginDiv").css({ "height": he + "px" });
    he = -($(window).height());
    $("#loginDiv").css({ "top": he + "px" });
    he = $(window).height();
    $("#loginP").css({ "padding-top": he + "px" });

    if ($(window).width() < 1305) {
        $("#loginDiv").offset({ top: 10 });
        $("#loginDiv").css({ "height": 120 + "px" });
        $("#loginP").css({ "padding-top": 0 + "px" });
        var dLeft = $("#greenPart").width();
        dLeft += ($(window).width() - $("#greenPart").width()) / 2;
        dLeft -= (20 + $("#loginP").width());
        $("#loginDiv").css("marginLeft", dLeft - 100);

        $("#lines").height("20px");
        $("#lines").width("100px");
        $("#bottomDiv").css("marginLeft", 165);
        $("#bottomDiv").css("marginTop", -90);
        $("#bottomDiv").css("width", 70);
        $("#hello").css("font-weight", "bold");
        $("#hello").css("color", "White");
    }

    return false;
});

$(window).resize(function () {
    var dLeft = $("#greenPart").width();
    dLeft += ($(window).width() - $("#greenPart").width()) / 2;
    dLeft += 10;
    $("#loginDiv").css("marginLeft", dLeft);

    var he = $(window).height() * 2;
    $("#loginDiv").css({ "height": he + "px" });
    he = -($(window).height());
    $("#loginDiv").css({ "top": he + "px" });
    he = $(window).height();
    $("#loginP").css({ "padding-top": he + "px" });

    $("#bottomDiv").css("marginLeft", 0);
    $("#bottomDiv").css("marginTop", 0);
    $("#bottomDiv").css("width", 170);
    $("#hello").css("font-weight", "normal");
    $("#hello").css("color", "Black");
    $("#loginP").css("padding-left", 0);

    if ($(window).width() < 1305) {
        $("#loginDiv").offset({ top: 10 });
        $("#loginDiv").css({ "height": 120 + "px" });
        $("#loginP").css({ "padding-top": 0 + "px" });
        var dLeft = $("#greenPart").width();
        dLeft += ($(window).width() - $("#greenPart").width()) / 2;
        dLeft -= (20 + $("#loginP").width());
        $("#loginDiv").css("marginLeft", dLeft - 100);

        $("#lines").height("20px");
        $("#lines").width("100px");
        $("#bottomDiv").css("marginLeft", 165);
        $("#bottomDiv").css("marginTop", -90);
        $("#bottomDiv").css("width", 70);
        $("#loginDiv").css("paddingLeft", 0);

        if ($("#hello").length != 0) {
            $("#hello").css("font-weight", "bold");
            $("#hello").css("color", "White");
            $("#loginP").css("padding-left", 120);
        }
    }
    return false;
});

Asp.netの部分では、changeLoginDiv（）がdivを変更し、問題を引き起こします。

 protected void LoginBtnClick(object sender, EventArgs e)
    {
        string username = user.Text;
        string password = pass.Text;

        if (username != "" && username != null)
        {
            if (password != "" && password != null)
            {
                if (db.IsExist("SELECT * FROM users WHERE username='" + username + "'"))
                {
                    if (db.IsExist("SELECT * FROM users WHERE [password]='" + password + "'"))
                    {
                        errorLabel.Text = "Loged in successfully.";

                        if (rememberME.Checked == true)
                        {
                            Response.Cookies["userInfo"]["username"] = username;
                            Response.Cookies["userInfo"]["lastVisit"] = DateTime.Now.ToString();
                            Response.Cookies["userInfo"].Expires = DateTime.Now.AddDays(365);
                        }
                        else
                        {
                            Session["username"] = username;
                        }

                        changeLoginDiv();
                    }
                    else errorLabel.Text = "Wrong password.";
                }
                else errorLabel.Text = "The username doesn't exist. \n\n\nIf you don't have a user, please register.";
            }
            else errorLabel.Text = "Please enter a password";
        }
        else errorLabel.Text = "Please enter a user name";
    }

    protected void LogoutBtnClick(object sender, EventArgs e)
    {
        Session["username"] = "";
        Response.Cookies["userifnfo"]["username"] = "";

        Response.Redirect(Request.RawUrl);
    }
    protected void MyProfileBtnClick(object sender, EventArgs e)
    {

    }


    public void changeLoginDiv()
    {
        string sessionST = (string)Session["username"];
        string cookiesST = (string)Request.Cookies["userifnfo"]["username"];
        if ((sessionST != null && sessionST != ""))
        {
            //loginP changes;

            string newHTML = "<span id='hello' height='22px'> Hello " + sessionST + "<br />";
            newHTML += "<img id='lines' src='images/lines.png' /></span>";
            newHTML += "<span><input type='button' id='ProfileBtn' height='30px' width='40px' runat='server' class='buttonC' value='My Profile' onclick='MyProfileBtnClick' /><br />";
            newHTML += "<input type='button' id='LogOutBtn' height='30px' width='40px' runat='server' Class='buttonC' value='Logout' onclick='LogoutBtnClick' /></span>";
            //newHTML += "<asp:Button ID='LogOutBtn' Height='22px' Width='50px' runat='server' UseSubmitBehavior='false' CssClass='buttonC' Text='Logout' OnClick='LogoutBtnClick' /></span>";


            loginP.InnerHtml = newHTML;
            loginP.Attributes.Add("style", "text-align: center;");
        }
        if ((cookiesST != null && cookiesST != ""))
        {
            //loginP changes;

            string newHTML = "<span height='22px'> Hello " + cookiesST + "<br />";
            newHTML += "<img id='lines' src='images/lines.png' /></span>";
            newHTML += "<span><input type='button' id='ProfileBtn' height='30px' width='40px' runat='server' class='buttonC' value='My Profile' onclick='MyProfileBtnClick' /><br />";
            newHTML += "<input type='button' id='LogOutBtn' height='30px' width='40px' runat='server' Class='buttonC' value='Logout' onclick='LogoutBtnClick' /></span>";

            loginP.InnerHtml = newHTML;
            loginP.Attributes.Add("style", "text-align: center;");
        }
    }

ありがとう=]

PS。ご覧のとおり、ajaxやその他の関数を使用してjQueryでonclickイベントをトリガーすることも試みました。

//$("#LogOutBtn").mousedown(function () {
//    drag.state = false;
//    return false;
//});
$(document).ready(function () {
    $("#LogOutBtn").click(function () {
        $.ajax({
            type: "POST",
            url: "sMaster.Master/LogoutBtnClick",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
        });
    });
});