jQuery 绑定button执行失败

#jquery绑定button执行失败
代码是这样的:

        $(document).ready(function(){
            $("#userlogin").click(function(){
                var username = document.getElementById("input_name").value.toString();
                var password = document.getElementById("input_password").value.toString();
                console.log("1111")
                $.post("url",{
                    M_name:username,
                    M_password:password
                },
                function(data,status){
                    var session = data.session;
                    if(session == username){
                        window.location.href="xxxxx";
                    }
                });
            });
        });
    

<body>
<button id="userlogin">登录button> 
    <div class="login">
        <form action="{% url 'demo:demo_login' %}" method="post"  enctype="multipart/form-data">
            {% csrf_token %}
           <div class="forms">
               <h3 style="color: forestgreen">用户名:h3><label for="input_name">label><input placeholder="Username" type="text" id="input_name" name="M_name"><br>
               <h3 style="color: forestgreen">密  码:h3><input placeholder="Password" type="password" id="input_password" name="M_password"><br>
           div>
            <div class="btn">
                <div>
                    <a style="color: red">{{ result }}a>
                    <button id="userlogin">登录button>
                div>
            div>
        form>
    div>
body>

第一个button点击可以成功执行,第二个button点击之后只能在控制台输出111,后面的post请求和跳转页面都不能执行。求帮助,百度了好几个都没有解决。

在你的 HTML 代码中,有两个具有相同 ID(userlogin)的元素,其中一个是 button,另一个是 a 标签,这可能导致在第二个按钮被单击时出现一些问题。另外,当你单击第二个按钮时,它会默认提交表单,这将重新加载页面并阻止 JavaScript 继续执行。所以你需要做以下几件事情:

删除 a 标签或为其设置不同的 ID。

阻止默认提交表单的行为。可以通过 preventDefault() 方法实现。

下面是修改后的代码:

<script>
    $(document).ready(function(){
        $("#userlogin").click(function(event){
            event.preventDefault();
            var username = document.getElementById("input_name").value.toString();
            var password = document.getElementById("input_password").value.toString();
            console.log("1111")
            $.post("url",{
                M_name:username,
                M_password:password
            },
            function(data,status){
                var session = data.session;
                if(session == username){
                    window.location.href="xxxxx";
                }
            });
        });
    });
</script>
 
<body>
    <div class="login">
        <form action="{% url 'demo:demo_login' %}" method="post"  enctype="multipart/form-data">
            {% csrf_token %}
            <div class="forms">
                <h3 style="color: forestgreen">用户名:</h3><label for="input_name"></label><input placeholder="Username" type="text" id="input_name" name="M_name"><br>
                <h3 style="color: forestgreen">密  码:</h3><input placeholder="Password" type="password" id="input_password" name="M_password"><br>
            </div>
            <div class="btn">
                <div>
                    <a style="color: red">{{ result }}</a>
                    <button id="userlogin">登录</button>
                </div>
            </div>
        </form>
    </div>
</body>



元素的id是唯一的,不能出现重复,你这个代码两个按钮的id重复了

你多写了一个 button