用thickbox弹出一个层 ,该层上有Button 怎样触发它的后台OnClick 事件，问题已解决

最新推荐文章于 2019-05-29 09:23:18 发布

xymbtc

最新推荐文章于 2019-05-29 09:23:18 发布

阅读量1.3k

点赞数 2

文章标签： button input div 服务器 class action

本文链接：https://blog.csdn.net/xymbtc/article/details/4596828

版权

各位兄弟们，这个问题在下昨晚终于研究出来了，主要问题出在于thickbox.js的工作原理上，请参见我的分析:

众所周知，asp.net 所有的控件必需放在有 runat="server"的form之内，而thickbox它所创建的层是嵌入在<body>中，从它代码可以看出来$("body").append(...)，而当你在调用thickbox的时候，它会将你指定的元素的所有子元素移动到它定义的结构里面，这样的话就出问题了，移动后的元素将不在<form runat="sever"></form>中，那么指定元素里的所有服务器控件都将无法执行后台代码。

这就是根本的原因，口说无凭，上代码：
为了解决这个问题，我将thickbox.js做了一点改写
[code=C#]
//这部分是处理内嵌元素如div得层
if(url.indexOf('TB_inline') != -1){
                   $("#TB_ajaxContent").append($('#' + params['inlineId']).children());
                   $("#TB_window").unload(function () {
                       $('#' + params['inlineId']).append( $("#TB_ajaxContent").children() ); // move elements back when you're finished
//
var w = window.open("");                             //我在unload事件中加了这么一段，在thickbox层关闭的时候
w.document.write($("body").html())           //可以看到及时的html代码，便于分析。
/
});
                   tb_position();
                   $("#TB_load").remove();
                   $("#TB_window").css({display:"block"});
[/code]
之后我将我试验的页面调用thickbox层前后代码做了一下对比，问题马上就显露出来了。

这是没调用thickbox前的页面代码：
[code=HTML]
<body>
<form name="form1" method="post" action="test.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTUyOTk4NzMzNGRkXZ2aBMh7Y3LqGDuOzjGe78hKwqM=" />
</div>
        <a class="thickbox" href="#TB_inline?height=250&width=300&inlineId=addition">点击</a>
        <div id="addition" style="padding: 10px;">
           
            <input type="submit" name="Button1" value="Button" id="Button1" />

            <span id="additionmsg"></span>
        </div>
    </div>

<div>

   <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgLg1uzeBwKM54rGBv4IX/cq3uLngRgxs8TJaKHpiJpW" />
</form>
</body>
[/code]

这是调用thickbox后的代码：
[code=HTML]
<body>
    <form name="form1" method="post" action="test.aspx" id="form1">
<div>
<input name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTUyOTk4NzMzNGRkXZ2aBMh7Y3LqGDuOzjGe78hKwqM=" type="hidden">
</div>

        <a class="thickbox" href="#TB_inline?height=250&width=300&inlineId=addition">点击</a>
        <div id="addition" style="padding: 10px;">


        <input name="Button1" value="Button" id="Button1" type="submit"><span id="additionmsg"></span></div>



   <input name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgLg1uzeBwKM54rGBv4IX/cq3uLngRgxs8TJaKHpiJpW" type="hidden">
</div></form>

<div class="TB_overlayBG" id="TB_overlay"></div><div style="margin-left: -165px; width: 330px; margin-top: -145px; display: none;" id="TB_window"><div id="TB_title"><div id="TB_ajaxWindowTitle"></div><div id="TB_closeAjaxWindow"><a href="#" id="TB_closeWindowButton">close</a></div></div><div id="TB_ajaxContent" style="width: 300px; height: 245px;"></div></div></div>
</body>
[/code]

原因找到了，如何解决呢，只需要吧thickbox里的$("body").append()改为$("#selector").append()，这个#selector只要在form1之中，或者将$("body").append()改为$("body form").append()或者$("body").find("form").append()大概就这意思，写法很多。问题得到圆满的解决，而且在FF IE6中均显示正常……

[powerby:xymbtc]

xymbtc

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
用thickbox弹出一个层 ,该层上有Button 怎样触发它的后台OnClick 事件，问题已解决

各位兄弟们，这个问题在下昨晚终于研究出来了，主要问题出在于thickbox.js的工作原理上，请参见我的分析:众所周知，asp.net 所有的控件必需放在有 runat="server"的form之内，而thickbox它所创建的层是嵌入在中，从它代码可以看出来$("body").append(...)，而当你在调用thickbox的时候，它会将你指定的元素的所有子元素移动到它定义
复制链接

扫一扫