Z0403 2023-03-28 13:14 采纳率: 0%
浏览 23

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";
                    }
                });
            });
        });
    </script>

<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请求和跳转页面都不能执行。求帮助，百度了好几个都没有解决。

  • 写回答

3条回答 默认 最新

  • 小唐不会敲代码 2023-03-28 13:39
    关注

    在你的 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>
    评论

报告相同问题？

问题事件

  • 创建了问题 3月28日

悬赏问题

  • ¥20 ARKts悬浮窗和快捷方式问题
  • ¥15 comparecluster没有办法kegg
  • ¥15 远程访问linux主机超时
  • ¥15 odoo17存货管理优势于中国国内该行业传统ERP或MES的详细解读和举例
  • ¥15 CPU卡指令整合指令数据都在图片上
  • ¥15 odoo17处理受托加工产品
  • ¥15 如何用MATLAB编码图三的积分
  • ¥15 圆孔衍射光强随孔径变化
  • ¥15 MacBook pro m3max上用vscode运行c语言没有反应
  • ¥15 ESP-PROG配置错误，ALL ONES