80

我的页面上有几个输入和选项元素,每个(几乎)都附加了一个事件,以便在页面上的某些文本更改后更新它们。我使用 jQuery,这真的很酷 :)

我还使用 Microsoft的Ajax框架,利用 UpdatePanel。我这样做的原因是某些元素是基于某些服务器端逻辑在页面上创建的。我真的不想解释为什么我使用 UpdatePanel - 即使它可以(它可以付出相当大的努力)被重写为只使用jQuery我仍然想要那个 UpdatePanel。

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

无论如何,在 UpdatePanel 完成更新DOM之后,我仍然存在重新绑定控件的问题。我最好需要一个不需要向页面添加更多 .js 文件(jQuery 插件)的解决方案,但只要能够捕获 UpdatePanel 的“更新后”,我就可以调用我的方法来重新绑定所有表单元素。 .

4

9 回答 9

86

由于您使用的是 ASP.NET AJAX,因此您可以访问pageLoad事件处理程序,每次页面回发时都会调用该事件处理程序,无论是全部还是部分来自 UpdatePanel。您只需将功能放入您的页面,无需连接。

function pageLoad(sender, args)
{
   if (args.get_isPartialLoad())
   {
       //Specific code for partial postbacks can go in here.
   }
}
于 2008-11-19T10:33:19.760 回答
23

on()或者您可以通过该方法检查最新的 jQuery 的实时功能。

于 2009-02-13T19:19:38.310 回答
22
Sys.Application.add_load(initSomething);
function initSomething()
{
  // will execute on load plus on every UpdatePanel postback
}
于 2008-11-20T08:32:40.347 回答
14

从 jQuery 1.7 开始,推荐的方法是使用jQuery 的 .on()语法。

但是,请确保在文档对象上设置事件,而不是在 DOM 对象本身上。例如,这将在 UpdatePanel 回发之后中断

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

...因为 ':inputs' 已被重写。改为这样做:

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

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

于 2012-08-01T17:21:00.577 回答
9

使用以下代码

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;
        }
    }
}
于 2009-07-29T10:05:56.883 回答
8

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

它有多种好处,可以减少代码噪音(无需重新绑定)。浏览器内存也更容易(DOM中绑定的事件更少。)

快速示例在这里

用于轻松事件委托的jQuery 插件。

PS 我有 99% 的把握在下一个版本中委派将出现在 jQuery 核心中。

于 2008-11-19T10:54:48.440 回答
5

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

    <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>
于 2010-11-04T16:21:02.987 回答
4

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

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


       }

            </script>

        </ContentTemplate>
    </asp:UpdatePanel>

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

于 2010-01-12T14:46:23.693 回答
2

使用 jQuery 的新 'live' 方法绑定您的事件。它会将事件绑定到您当前的所有元素以及所有未来的元素。查清!:)

于 2010-03-12T19:33:13.623 回答