2

当用户右键单击 GridView 的行并且 GridView 在 UpdatePanel 中时，我使用下面的 JavaScript 代码显示一个列表。当回发发生时，它不会显示列表。

$(document).ready(function () {
    //--------------- Info Box --------------------
    $('.CityItem').mouseup(function (e) {
       if ( e.which === 3 ) {
          $('.CityItem').children('.CompanyList').hide();
          $(this).children('.CompanyList').toggle();

          $(this).children('.CompanyList').css('top', e.pageY - 300 );
          $(this).children('.CompanyList').css('left', e.pageX - 175 );
       }
       e.preventDefault();
    });
    $('.CityItem').hover( function () {
       $(this).children('.CompanyList').hide();
    });
});
4

2 回答 2

0

这是因为在完成 ajax 调用后会再次添加元素，但不会再次触发 document.ready。可以通过事件委托来解决。

$(document).ready(function () {
    //--------------- Info Box --------------------
    $(document).on('mouseup', '.CityItem', function (e) {
       if ( e.which === 3 ) {
          $('.CityItem').children('.CompanyList').hide();
          $(this).children('.CompanyList').toggle();

          $(this).children('.CompanyList').css('top', e.pageY - 300 );
          $(this).children('.CompanyList').css('left', e.pageX - 175 );
       }
       e.preventDefault();
    });
    $(document).on('hover', '.CityItem',function () {
       $(this).children('.CompanyList').hide();
    });
});

委托事件的优点是它们可以处理来自以后添加到文档的后代元素的事件。通过选择一个在附加委托事件处理程序时保证存在的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要，jQuery Api

当 ajax 请求结束时，您还可以使用Sys.WebForms.PageRequestManager endRequest Event将事件重新绑定到添加的元素。

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler)


function EndRequestHandler(sender, args)           
{
    if (args.get_error() != undefined)
    {
        bindEvents(); 
    }
}

function bindEvents()
{
     //--------------- Info Box --------------------
    $('.CityItem').mouseup(function (e) {
       if ( e.which === 3 ) {
          $('.CityItem').children('.CompanyList').hide();
          $(this).children('.CompanyList').toggle();

          $(this).children('.CompanyList').css('top', e.pageY - 300 );
          $(this).children('.CompanyList').css('left', e.pageX - 175 );
       }
       e.preventDefault();
    });
    $('.CityItem').hover( function () {
       $(this).children('.CompanyList').hide();
    });

}

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

于 2013-10-14T06:08:02.357 回答
0 
// Attach a handler to the load event.
Sys.Application.add_load(applicationLoadHandler);

将处理程序（上面的代码）放在 updatePanel 中。然后更新面板刷新时将执行 applicationLoadHandler。

function applicationLoadHandler() {
   //--------------- Info Box --------------------
    $(document).on('mouseup', '.CityItem', function (e) {
       if ( e.which === 3 ) {
          $('.CityItem').children('.CompanyList').hide();
          $(this).children('.CompanyList').toggle();

          $(this).children('.CompanyList').css('top', e.pageY - 300 );
          $(this).children('.CompanyList').css('left', e.pageX - 175 );
       }
       e.preventDefault();
    });
    $(document).on('hover', '.CityItem',function () {
       $(this).children('.CompanyList').hide();
    });
    }
于 2013-10-14T06:18:56.590 回答