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

Question

asp.net.webformjquery事件冲突

Answer 1

unbind用看看是否可以去掉btnSave的事件

Answer 2

一会HTML控件,一会服务器控件,你直接用<input type='button' onclick="">不就得了,要这么麻烦吗

Answer 3

而JQuery的$('#btnSave').click()是在原有事件上的叠加，也就是说btnSave的onclick实际上是
__doPostBack('btnSave',''); retrun CheckForm();
----------------------------------------------------------------------------------
纠正一下
JQuery的$('#btnSave').click()是在原有事件上的叠加，也就是说btnSave的onclick实际上是一个类似于以下形式的
多播事件或者叫多重委托
click[0]=function(){__doPostBack('btnSave',''); } 
click[1]=function{retrun CheckForm();}
这与"__doPostBack('btnSave',''); retrun CheckForm();"是不同的，尤其是返回值的处理上

Answer 4

因为webform
你不能用jquery 
要写在这里
<button id="btnSave" runat="server" onserverclick="btnSave_ServerClick" onclick=“retrun CheckForm()”>提交</button>

Answer 5

因为webform
你不能用jquery 
要写在这里
<button id="btnSave" runat="server" onserverclick="btnSave_ServerClick" onclick=“retrun CheckForm()”>提交</button>
你说的没错，但我希望使用JQuery的 $(document).ready(function (){...}，将处理代码统一放在一处，而不是临散的写在各个控件里

Answer 6

曾尝试用以下代码进行对将事件插入，但不能达到目的//InsertEvent，不能达到目的，因为多播事件中某个事件retrun false，并不能阻止对事件链后其它事件的调用
function InsertEvent() {
    var event = document.getElementById('btnSave').onclick;
    $("#btnSave").attr("onclick", "");
    $("#btnSave").click(function () {
return CheckForm();
    });
    $("#btnSave").click(event);
}
有两种解决方式，但个人觉得都不太理想
一、WebControl的Attributes属性protected void Page_Load(object sender, EventArgs e)
{
    btnSave.Attributes["onClick"] = "return CheckForm();";
}生成的html代码如下<button onclick="return CheckForm(); __doPostBack('btnSave','')" id="btnSave">提交</button>
二，JQuery的.attr$(document).ready(function () {
   $("#btnSave").attr("onclick", "return CheckForm(); " + $("#btnSave").attr("onclick"));
    //alert($("#btnSave").attr("onclick"));
})
但感觉这两种方法都是将js代码放到字符串中，并不太理想，求更好的代码

Answer 7

参考: Asp.Net 不同的OnClick事件区别小结(onserverclick,onclientclick)
Asp.net 中 OnClientClick 与 OnClick 的执行顺序
把CheckForm放在OnClick里面试试<button id="btnSave" runat="server" OnClick="CheckForm" onserverclick="btnSave_ServerClick">提交</button>

Answer 8

如果使用jQuery的话，参考
jQuery: form.submit(fn) does not work with Asp.net?//trigger jquery form submit event handlers on __doPostBack
$(function() {
    var oldPostBack = __doPostBack;
    __doPostBack = function() {
        $("form").triggerHandler("submit");
        oldPostBack.apply(this, arguments);
    };
});$(document).ready(function() {
    $("form").submit(function() {
            CheckForm();
    });
});

Answer 9

试过了，没用        $(document).ready(function () {
            $("#btnSave").removeAttr("onclick");
            $("#btnSave").unbind("click");
            $("#btnSave").click(function () {
                alert("你确定要提交?");
                __doPostBack('btnSave', '')
            });
        });这样不行?

Answer 10

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

Answer 11

补充一下，上述方式最终的js代码
"return CheckForm();__doPostBack('btnSave','')" 
会导致回发无法正常工作，当CheckForm()返回true时，表单自动提交，但不会触发服务端的btnSave_ServerClick事件，无论是true还是false，__doPostBack('btnSave','')都不会被执行，因为上一句是return true/false，__doPostBack不运行，webform的由回发触发事件机机制就不能正常工作，解决的方式也很简单，将"return CheckForm();"改为"if(!CheckForm()) return false;"

Answer 12

$("#btnSave").removeAttr("onclick");
 $("#btnSave").unbind("click"); 
unbind好像没法将click事件去掉，真正工作的是removeAttr，是吗

Answer 13

$("#btnSave").removeAttr("onclick");
 $("#btnSave").unbind("click"); 
unbind好像没法将click事件去掉，真正工作的是removeAttr，是吗
        $(document).ready(function () {
            //$("#btnSave").removeAttr("onclick");
            $("#btnSave").unbind("click");
            $("#form1").unbind("submit");
            $("#form1").submit(function () {
                return false;
            });
            $("#btnSave").click(function () {
                alert("你确定要提交?");
                //return false;
                //__doPostBack('Button1', '')
            });
        });他做的是提交的动作

Answer 14

<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" 
                style="height: 21px" UseSubmitBehavior="False"/>如果你用这个的话,就得这么用        $(document).ready(function () {
            $("#Button1").removeAttr("onclick")
            //$("#Button1").unbind("click");
            $("#Button1").click(function () {
                alert("你确定要提交?");
                //return false;
            });
        });

Answer 15

上面的代码怎么执行原来的onclick事件处理代码？

Answer 16

上面的代码怎么执行原来的onclick事件处理代码？你不加__doPostBack('btnSave', '')这个怎么可能执行?

Answer 17

上面的代码怎么执行原来的onclick事件处理代码？你不加__doPostBack('btnSave', '')这个怎么可能执行?
这样就没有通用性啊，为什么不把原onclick处理事件保存起来，先加上自己的处理程序，然后把原处理程序附加上去

Answer 18

上面的代码怎么执行原来的onclick事件处理代码？你不加__doPostBack('btnSave', '')这个怎么可能执行?
这样就没有通用性啊，为什么不把原onclick处理事件保存起来，先加上自己的处理程序，然后把原处理程序附加上去        $(document).ready(function () {
            var _click = $("#Button1").attr("onclick");
            $("#Button1").removeAttr("onclick")
            //$("#Button1").unbind("click");
            $("#Button1").click(function () {
                alert("你确定要提交?");
                Function(_click)();
                //return false;
            });
        });

Answer 19

看了原文，长见识了，类似于hook掉了 __doPostBack，但是代码在当前情形下不能正常工作
webform生成出来的html代码是这样的
<button onclick="__doPostBack('btnSave','')" id="btnSave">保存</button>
因为__doPostBack前没有return，所以即使hook了__doPostBack，返回false，也没法阻止提交啊            $(function () {
                var oldSubmit = __doPostBack;
                var newSubmit = function (eventTarget, eventArgument) {
                    if (!CheckForm()) {
                        alert("验证失败");
                        return false;
                    }
                    else
                        return oldSubmit(eventTarget, eventArgument);
                };
                __doPostBack = newSubmit;
            });

Answer 20

上面的代码怎么执行原来的onclick事件处理代码？你不加__doPostBack('btnSave', '')这个怎么可能执行?
这样就没有通用性啊，为什么不把原onclick处理事件保存起来，先加上自己的处理程序，然后把原处理程序附加上去        $(document).ready(function () {
            var _click = $("#Button1").attr("onclick");
            $("#Button1").removeAttr("onclick")
            //$("#Button1").unbind("click");
            $("#Button1").click(function () {
                alert("你确定要提交?");
                Function(_click)();
                //return false;
            });
        });
这种思种也没办法阻止提交，“多播事件中某个事件retrun false，并不能阻止对事件链后其它事件的调用”
alert("你确定要提交?");
Function(_click)();
可能应该改成 
if(!confirm('表单验证')) 
  return false;
else
  Function(_click)();

Answer 21

上面的代码怎么执行原来的onclick事件处理代码？你不加__doPostBack('btnSave', '')这个怎么可能执行?
这样就没有通用性啊，为什么不把原onclick处理事件保存起来，先加上自己的处理程序，然后把原处理程序附加上去        $(document).ready(function () {
            var _click = $("#Button1").attr("onclick");
            $("#Button1").removeAttr("onclick")
            //$("#Button1").unbind("click");
            $("#Button1").click(function () {
                alert("你确定要提交?");
                Function(_click)();
                //return false;
            });
        });
这种思种也没办法阻止提交，“多播事件中某个事件retrun false，并不能阻止对事件链后其它事件的调用”
alert("你确定要提交?");
Function(_click)();
可能应该改成 
if(!confirm('表单验证')) 
  return false;
else
  Function(_click)();我只是想告诉你他能执行到这里

Answer 22

把 onserverclick="btnSave_ServerClick" 去掉，然后在 CheckForm() 为true的判断语句里面，就调用这段代码 __doPostBack('btnSave','')；  相信楼主应该也明白了，服务器端控件最终也是通过__doPostBack去请求 aspx.cs里面的代码的。

Answer 23

其实问题在<button>标签，这个标签跟其它的<input>标签不同，它在post的时候不会出现在post数据里，所以webform为它生成了一个__doPostBack代码