bootstarp modal 弹出层的点击按钮事件，非常奇怪的问题。在线等。急！

[Tyler_King]

情况是这样的：我的后台页面框架是用bootstrap开发的 下面的代码是两个弹出层。
两个按扭分别控制新增和编辑在下面的JS代码中。
在新增和编辑的页面都有保存的按钮，
分别是btn_EditChannelTemplatePage 编辑
btn_SaveChannelTemplatenPage增加
现在问题来。当我把增加弹出层放在编辑弹出层的下面时。
编辑弹出层的保存按钮在后台直接执行新增的方法。
而当我把编辑层放在新增层的代码下面时后台直接执行编辑的方法，

就是说把哪个层的代码放在下面就执行哪个层的的保存按钮方法。完全不按套路出牌。
我估计是z-index的问题。因为当中保留其中一个层时都没有问题。
但是我也不知道要改哪里。

有大神帮帮我吧。

 弹出层1编辑频道模板页面        
<div id="EditModal" class="modal col-md-6 col-md-offset-3" style="background: #fff; margin-top: 30px; margin-bottom: 50px;" tabindex="-1" role="dialog" aria-labelledby="EditModalLabel" aria-hidden="true">
            <div class="modal-header" style="padding: 0px;">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h5 id="EditModalLabel">修改频道模板页面</h5>
            </div>
            <div class="modal-body">
                <div class="form-group">
    
                 此处代码略
            
            </div>
            <div class="modal-footer">
                <asp:Button ID="btn_EditChannelTemplatePage" runat="server" class="btn btn-primary" Text="提交" OnClick="btn_EditChannelTemplatePage_Click" />
                <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
            </div>
        </div>
//////////////////////////////////////////////////////////////////////////
弹出层2增加频道模板页面 
        <div id="AddModal" class="modal col-md-6 col-md-offset-3" style="background: #fff; margin-top: 30px; margin-bottom: 50px;" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-header" style="padding: 0px;">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h5 id="myModalLabel">增加频道模版页面</h5>
            </div>
            <div class="modal-body">
                <div class="form-group">

                  此处代码略
                     <div class="form-group">
                    <label>英文名称</label>
                    <asp:TextBox ID="templateenname" name="templateenname" runat="server" class="form-control"></asp:TextBox>
                </div>
            </div>
            <div class="modal-footer">
               
                <asp:Button ID="btn_SaveChannelTemplatenPage" runat="server" class="btn btn-primary" Text="增加" OnClick="btn_SaveChannelTemplatenPage_Click"/>
                <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
            
            </div>
        </div>

JS代码

          
              $('#AddChannelTemplatePage').click(function () {
                $('#AddModal').modal('show');
                
                document.getElementById("templatename").value = "";
                document.getElementById("templateenname").value = "";
                document.getElementById("templatenameaspx").value = "";
                document.getElementById("templatenamehtml").value = "";
                document.getElementById("templatepagesort").value = "";
            });

            //编辑频道模板页面
            $('#EditChannelTemplatePage').click(function () {
                $('#AddModal').modal('hide');
                var $table = $('#table');

                if ($table.bootstrapTable('getSelections', 1).length > 0) {

                    var pagejson = JSON.stringify($table.bootstrapTable('getSelections', 1));
                    var obj1 = eval(pagejson);

                    if (obj1.length > 1) {
                        $('#ErrorModal').modal('show');
                    }
                    else {
                        document.getElementById("getchanneltemplatelid").value = obj1[0].id;
                        document.getElementById("edittemplatename").value = obj1[0].name;
                        document.getElementById("edittemplateenname").value = obj1[0].enname;
                        document.getElementById("edittemplatenameaspx").value = obj1[0].aspxpage;
                        document.getElementById("edittemplatenamehtml").value = obj1[0].htmlpage;
                        document.getElementById("edittemplatepagesort").value = obj1[0].sortid;
                        $('#EditModal').modal('show');

                    }
                }
            });

现在点编辑的保存按钮直接变成了新增!

[以专业开发人员为伍]

你可以先把 <asp:Button 改为 <button，看看普通的dom 触发的点击事件是否会因“哪一个在前边”而乱触发。 我也是第一次见到一个在 modal 中使用 asp.net 回发的例子（你可以在普通的页面中去触发回发，甚至扔掉 asp.net 回发机制而改为 ajax 提交方式）。 bootstrap 的 modal 确实是诡异，它会自动移动位置，而并不在html 组件树种你认为的、原来书写的位置。不过会不会触发你说的这个问题，我不确定。 如果普通的 <button>不会胡乱出发 click 事件，那么你可以再仔细查看一下进一步的 http 调试信息。或者干脆就按照前端的方式来编程，不要回发 asp.net 页面。

[以专业开发人员为伍]

你的“JS代码”整体来说写的比较累赘。使用 ko 可以很轻松地绑定数据，实现各种初始化、捕获事件、赋值等等。这方面就不多说了。 只不过，假设你使用 <button>来处理 click 事件，那么写类似于

$.post("addTemplate.ashx",
    {name: ...., html: ......, order:.....}, 回调);

这样的形式来提交你的 modal 上的几个字段，根据回调时的结果（成功？）再来决定是不是要刷新页面或者怎样，而不用 asp.net 页面post 回发方式来提交这几个字段。 这样，慢慢地，也很简单的方式，你的前端就敏捷了。

[Tyler_King]

引用 1 楼 sp1234 的回复:

你可以先把 <asp:Button 改为 <button，看看普通的dom 触发的点击事件是否会因“哪一个在前边”而乱触发。 我也是第一次见到一个在 modal 中使用 asp.net 回发的例子（你可以在普通的页面中去触发回发，甚至扔掉 asp.net 回发机制而改为 ajax 提交方式）。 bootstrap 的 modal 确实是诡异，它会自动移动位置，而并不在html 组件树种你认为的、原来书写的位置。不过会不会触发你说的这个问题，我不确定。 如果普通的 <button>不会胡乱出发 click 事件，那么你可以再仔细查看一下进一步的 http 调试信息。或者干脆就按照前端的方式来编程，不要回发 asp.net 页面。

我也正在想ajax方式处理算了。可能是懒，ajax要写很多证验，要多写很多代码，呵呵。直接用asp.net触发的话可以少做很多工作。

[Tyler_King]

引用 2 楼 sp1234 的回复:

你的“JS代码”整体来说写的比较累赘。使用 ko 可以很轻松地绑定数据，实现各种初始化、捕获事件、赋值等等。这方面就不多说了。 只不过，假设你使用 <button>来处理 click 事件，那么写类似于

$.post("addTemplate.ashx",
    {name: ...., html: ......, order:.....}, 回调);

这样的形式来提交你的 modal 上的几个字段，根据回调时的结果（成功？）再来决定是不是要刷新页面或者怎样，而不用 asp.net 页面post 回发方式来提交这几个字段。 这样，慢慢地，也很简单的方式，你的前端就敏捷了。

这个项目以前有后台代码的。现在只是把前端全部改了。我可以直接COPY过来。这样快很多。如果写成AJAX的话我要多写很多代码。