ajax在button中使用onclick失效原因

        在做页面提交的时候,发现通过button中onclick绑定的方法时,怎么也无法提交ajax请求,但是使用click方法的时候确实可以成功。因缺思厅。这里做下分析。先看下代码

1、使用onclick方法

<input id="login" name="" onclick="login()" type="button" class="btn btn-success radius size-L col-xs-3" value=" 登    录 ">
function login() {
        $.ajax({
            type:"POST",
            url:"{:url('admin/login/check')}",
            data:$("form").serialize(),
            dataType:'json',
            success: function(data) {
                    if (data.status == 1) {
                        window.location.href="{:url('index/index')}";
                    }else {
                        alert(data.message);
                    }
            }
        });
    }

2、使用click方法

$(function(){
        $("#login").on('click',function (event) {
            $.ajax({
                type:"POST",
                url:"{:url('admin/login/check')}",
                data:$("form").serialize(),
                dataType:'json',
                success: function(data) {
                    if (data.status == 1) {
                        window.location.href="{:url('index/index')}";
                    }else {
                        alert(data.message);
                    }
                }
            });
        })
    })

分析

    查阅资料后,明白 ajax动态加载之前js就加载完了。这TM就很尴尬了,使用onclick没有绑定上,而第二种方法之所以可以成功,主要是因为$(function(){})的原因,简单的来说,这个函数可以在文档载入完成后执行,就是因为这个原因,所以第二个方法提交ajax才可以成功!


猜你喜欢

转载自blog.csdn.net/dhywjx/article/details/79661805