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

Question

我的页面上有几个输入和选项元素，每个元素（几乎）都附加了一个事件，用于在页面上的某些文本发生更改时更新它们。 我使用 jQuery，这真的很酷:)

我还使用 Microsoft 的 Ajax 框架，利用 UpdatePanel。 我这样做的原因是，某些元素是根据某些服务器端逻辑在页面上创建的。 我真的不想解释为什么我使用 UpdatePanel - 即使它可以（可以通过相当多的努力）重写为仅使用 jQuery 我仍然想要那个 UpdatePanel。

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

无论如何，在 UpdatePanel 完成更新 DOM 后，我留下了重新绑定控件的问题。 我最好需要一个不需要向页面添加更多 .js 文件（jQuery 插件）的解决方案，但需要像能够捕获 UpdatePanel 的“afterupdating”一样简单的解决方案，我可以在其中调用我的方法来重新绑定所有表单元素。

Answer 1

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

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

Answer 2

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

Answer 3

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

Answer 4

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

但请确保您在 document 对象上设置事件，而不是在 DOM 对象本身上。 例如，这将在 UpdatePanel 回发后中断：

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

...因为 ':inputs' 已被重写。 相反，请执行以下操作：

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

只要文档存在，任何输入（包括来自 UpdatePanel 刷新的输入）都将触发更改处理程序。

Answer 5

使用以下代码

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;
        }
    }
}

Answer 6

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

它有多种好处，可以减少代码噪音（无需重新绑定）。 这是
也更容易占用浏览器内存（DOM 中绑定的事件更少。）

简单示例此处。

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

PS 我 99% 确信代表团将在下一个版本中出现在 jQuery 核心中。

Answer 7

使用以下代码，您需要验证控件将使用datapicker：

    <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>

Answer 8

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

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


       }

            </script>

        </ContentTemplate>
    </asp:UpdatePanel>

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

Answer 9

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