.net服务端控件与JQuery事件绑定冲突的有关问题

.net服务端控件与JQuery事件绑定冲突的问题
Demo页面非常简单如下：



<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FormCheck3.aspx.cs" Inherits="GridView_Test.FormCheck3" %>


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script type="text/javascript" src="JavaScript/jquery.js"></script>

    <script type="text/javascript">

        //初始化

        $(document).ready(function () {

            $('#btnSave').click(function () {

                return CheckForm();

            });

        })


        //表单检查

        function CheckForm() {

            if ($('#txtField1').val() == "" || $('#txtField2').val() == "") {

                alert("字段不能为空！");

                return false;

            }

            else

                return true;

        }

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <input id="txtField1" runat="server" type="text" value=""/>

        <input id="txtField2" runat="server" type="text" value=""/>

        <button id="btnSave" runat="server" onserverclick="btnSave_ServerClick">提交</button>

    </div>

    </form>

</body>

</html>

什么也不输，点提交按钮，表单验证CheckForm提示字段不能为空，并return false，但页面仍然被postback回了服务端，查看了html源码发现



<script type="text/javascript"> 

//<![CDATA[

var theForm = document.forms['form1'];

if (!theForm) {

    theForm = document.form1;

}

function __doPostBack(eventTarget, eventArgument) {

    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {

        theForm.__EVENTTARGET.value = eventTarget;

        theForm.__EVENTARGUMENT.value = eventArgument;

        theForm.submit();

    }

}

//]]>

</script>

<button onclick="__doPostBack('btnSave','')" id="btnSave">提交</button>

webform框架为btnSave的onclick添加了__doPostBack('btnSave','')

而JQuery的$('#btnSave').click()是在原有事件上的叠加，也就是说btnSave的onclick实际上是
__doPostBack('btnSave',''); retrun CheckForm();

这也就是为什么retrun false;阻止不了回发的原因，解决的方法是把retrun CheckForm()代码放在__doPostBack('btnSave','');之前

但这要怎么作呢，想尽量在$(document).ready()中用JQuery实现，所以不考虑以下这种方式
<button id="btnSave" runat="server" onserverclick="btnSave_ServerClick" onclick="retrun CheckForm();">提交</button>

求解

------解决方案--------------------
参考: Asp.Net 不同的OnClick事件区别小结(onserverclick,onclientclick)
Asp.net 中 OnClientClick 与 OnClick 的执行顺序
把CheckForm放在OnClick里面试试



<button id="btnSave" runat="server" OnClick="CheckForm" onserverclick="btnSave_ServerClick">提交</button>

------解决方案--------------------

引用:

Quote: 引用:

    $(document).ready(function () {
            $("#btnSave").removeAttr("onclick");
            $("#btnSave").unbind("click");
            $("#btnSave").click(function () {
                alert("你确定要提交?");
                return false;
                //__doPostBack('btnSave', '')
            });
        });

.net服务端控件与JQuery事件绑定冲突的有关问题

相关推荐