代码之家 › 专栏 › 技术社区 › Per Hornshøj-Schierbeck

Ajax更新后jQuery中的重新绑定事件(updatepanel)

updatepanel asp.net-ajax jquery asp.net

Per Hornshøj-Schierbeck · 技术社区 · 16 年前

我的页面上有几个输入和选项元素,每个元素(几乎)都有一个事件,一旦它们发生变化,就会更新页面上的一些文本。我使用jQuery,它真的很酷:)

我也用微软 Ajax 框架,利用UpdatePanel。我这样做的原因是,某些元素是基于一些服务器端逻辑在页面上创建的。我真的不想解释为什么我要使用UpdatePanel——即使它可以(经过相当大的努力)被重写为仅使用 jQuery 我仍然想要那个更新面板。

您可能已经猜到了——一旦我在UpdatePanel上进行了回发,jQuery事件就会停止工作。实际上,我早就预料到了这一点,因为“回发”并不是一个新的回发,所以我在document.ready中绑定事件的代码不会再次被触发。我还通过阅读jQuery帮助库来证实我的怀疑。

不管怎样,在UpdatePanel完成更新后,我遇到了重新绑定控件的问题 DOM 。我最好需要一个解决方案,它不需要向页面添加更多的.js文件(jQuery插件),而是能够捕获UpdatePanel的“更新后”,在那里我可以调用我的方法来重新绑定所有表单元素。

9 回复 | 直到 15 年前

Phil Jenkins 15 年前

既然你使用的是ASP。NET AJAX,您将可以访问 pageLoad 事件处理程序,每次页面返回时都会被调用,无论是完整的还是部分的。你只需要把这个函数放在你的页面上,不需要连接。

function pageLoad(sender, args)
{
   if (args.get_isPartialLoad())
   {
       //Specific code for partial postbacks can go in here.
   }
}

David d C e Freitas 12 年前

或者,您可以通过以下方式查看最新的jQuery实时功能 on() 方法。

Paulius 16 年前

Sys.Application.add_load(initSomething);
function initSomething()
{
  // will execute on load plus on every UpdatePanel postback
}

lambinator 13 年前

从jQuery 1.7开始,建议使用 jQuery's .on() 语法。

但是,请确保您在文件对象,而不是DOM对象本身。例如, 这将在UpdatePanel回发后中断 :

$(':input').on('change', function() {...});

…因为“:inputs”已被重写。改为这样做:

$(document).on('change', ':input', function() {...});

只要文档存在,任何输入(包括来自UpdatePanel刷新的输入)都会触发更改处理程序。

shatl 16 年前

使用以下代码

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);

function pageLoaded(sender, args) {
    var updatedPanels = args.get_panelsUpdated();
    // check if Main Panel was updated 
    for (idx = 0; idx < updatedPanels.length; idx++) {
        if (updatedPanels[idx].id == "<%=upMain.ID %>") {
            rebindEventsForMainPanel();
            break;
        }
    }
}

Peter Mortensen icecrime 15 年前

您可以使用jQuery和事件委托。基本上将事件挂钩到容器,而不是每个元素,并查询event.target并基于此运行脚本。

它有多个好处,因为您可以减少代码噪声(无需重新绑定)。它是在浏览器内存上也更容易(DOM中绑定的事件更少)

快速示例 here .

jQuery plugin 便于活动委派。

附言:我99%确信下一个版本的jQuery核心将包含授权。

rocke_amiga 14 年前

使用以下代码,您需要验证控件将使用数据选择器:

    <script type="text/javascript" language="javascript">

         Sys.WebForms.PageRequestManager.getInstance().add_endRequest(addDataPicker); 
         function addDataPicker(sender, args)
         {
            var fchFacturacion = document.getElementById('<%= txtFechaFacturacion.ClientID %>');
            if (fchFacturacion != null) {
               $(fchFacturacion).datepicker({ onSelect: function () { }, changeMonth: true, changeYear: true, showOn: 'button', buttonImage: '../Imagenes/calendar.gif', buttonImageOnly: true});}
         } 

    </script>

     <asp:UpdatePanel ID="upEjem" runat="server" UpdateMode="Conditional">
       <ContentTemplate>
              <div id="div1" runat="server" visible="false">
                  <input type="text" id="txtFechaFacturacion" 
                      name="txtFechaFacturacion" visible="true"
                      readonly="readonly" runat="server" />
              </div>
       </ContentTemplate>
     </asp:UpdatePanel>

civanm 15 年前

         <script type="text/javascript">
             function pageLoad() {

                 if (Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack()) {


       }

            </script>

        </ContentTemplate>
    </asp:UpdatePanel>

在“if”中,您可以在每次updatepanel执行AsyncPostBack时,将需要执行的代码放入其中。

John Strickler 15 年前

使用jQuery的新“live”方法绑定您的事件。它将把事件与你现在的所有元素以及未来的所有元素联系起来。查青! :)