JQuery-UI Dialog下使用服务器端按钮失效

目标:点按钮弹出div层,选择数据后自动隐藏div,将所选数据赋值到窗体。

<div id="divWinPop">

//里面是要实现弹出框的代码,包括翻页、查找等.

</div>

当使用JQuery把上面div部分代码实现Dialog时,发现里面的服务器端按钮无法触发事件。

后来查资料发现,JQuery会把代码appendTo到body,而不在form里,所以按钮事件无法触发。

解决方法:在点击按钮打开Dialog时,将div append到form里,使按钮生效。

在div divWinPop外面,再套一层div,如:

<div id="divParent">

  <div id="divWinPop">

  </div>

</div>

这样在按钮事件中写:

<script language="javascript" type="text/javascript"><!--
 
$(document).ready(function()  
{
$("#divWinPop").hide(); //加载时隐藏div
 $("#btn").click(function() {
   $("#divWinPop").dialog({modal:true}); 
   $("#divWinPop").dialog({600,height:450}); //设置宽度、高度
      $("#divWinPop").dialog( "option", "position", "center" );
      $("#divWinPop").parent().appendTo("#divParent"); //将弹出div append到属于form里的div,那么服务器端控件就可以正常执行
    });
    

});
</script> 
原文地址:https://www.cnblogs.com/colder/p/4914634.html