不显示我在回发后右键单击 JavaScript 时显示的列表

Doesn't show list that I show with right click in JavaScript after postback

本文关键字：显示 JavaScript 单击 列表 右键      更新时间：2023-09-26

当用户右键单击 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();
    });
});

// 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();
    });
    }
这是因为元素在

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

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

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

相关文章：