Question

我有一个UpdatePanel，我用它来替换页面内的内容。在UpdatePanel之外我有一些使用on()函数的jQuery来分配一些按钮点击。根据我的理解，the new jQuery.on() syntax旨在替换事件处理程序和旧的live()功能。 live()函数应该监视页面的更改并将事件附加到添加到页面的任何元素，但我的测试页中的on()函数不会发生这种情况。如果我在UpdatePanel更改后打开控制台并运行相同的函数，则事件处理程序可以正常工作。

这是我明智的javascript：

$(function () {
    $('.results').on('click', function () {
        $(this).children('.explination').slideToggle();
    });
});

UpdatePanel是一个简单的UpdatePanel，里面有MultiView。

我知道我可以使用Microsoft Ajax PageRequestManager来处理这个问题，但是如果事件绑定我认为应该是这样的，那么它似乎是不必要的。我现在会用它，但我很好奇我是不是做错了，或者jQuery和ASP.Net是不是一起工作。

我的一个理论是，无论出于何种原因，UpdatePanel都是如何解决jQuery用于捕获更改并再次触发on事件的DOM更新触发器。

Answer 1

诀窍是使用委托事件。引用jQuery文档：

委托事件的优势在于，它们可以处理来自稍后添加到文档的后代元素的事件。通过选择附加委托事件处理程序时保证存在的元素，您可以使用委派事件来避免频繁附加和删除事件处理程序。

要使用委托事件，请将选择器作为第二个参数传递，如：

$('html').on('click', '.results', function () {
    $(this).children('.explination').slideToggle();
});

Answer 2

我讨厌更新面板......呃。也许尝试这样的事情：

DOM：

<asp:UpdatePanel runat="server"><ContentTemplate>
  <MultiView>...</MultiView>
  <script>
    var prm = Sys.WebForms.PageRequestManager.getInstance(); 
    prm.add_endRequest(function() {
        ready();
    });
    </script>
 </ContentTemplate></asp:UpdatePanel>

的Jquery岬：

 $(document).ready(function(){
        ready();
    });

    function ready(){
      $('.results').on('click', function () {
         $(this).children('.explination').slideToggle();
      });
    }

jQuery .on（）和UpdatePanels

2 个答案: