JavaScript 触发器不起作用

Question

我尝试触发一个按钮，以便当用户加载页面时，会自动单击该按钮。

我的代码如下:

$(document).ready(function() {  
  console.log("it's here");

  $("#btnPeriod").trigger('click');
});

$("#btnPeriod").on('click', function(){
  var ahhhhh = "<security:authentication property="securityUser.fullName"/>";
  ahhhhh = ahhhhh.replace(/&#32;/g, " ");
  console.log(ahhhhh);

  $.extend($("#noticeList").jqGrid("getGridParam", "postData"),{
    filters : JSON.stringify({
      groupOp : "OR",
      rules : [{
        field : "notiWriter",
        op : "eq",
        data : ahhhhh
      }],
      groups : []
    })
  });
  $("#noticeList").jqGrid("setGridParam", {search : true}).trigger('reloadGrid', [{current : true, page : 1}]);
});

当页面加载时，我可以看到“it's here”的日志和ahhhhh的值。然而，即使我可以看到日志，应该发生的操作也不会被应用。有趣的是，当我单击按钮时，它就会起作用，并显示另一条变量 ahhhhh 的日志消息。

仅供引用，我正在使用 jqGrid，当我单击 btnPeriod 按钮时，它会过滤其 notiWriter 单元格值与变量 ahhhhh 不匹配的行。

现在，当我加载此页面时，它显示如下:

然后，当我单击按钮时，它只显示某些行，如下所示:

我希望当用户加载页面时它总是看起来像第二张图片。

我曾经使用过setTimeout，但结果效果并不好，所以希望大家给我一些帮助。

提前谢谢您。

Answer 1

您需要在调用 trigger() 之前将单击处理程序绑定(bind)到 document.ready 处理程序内的按钮。试试这个:

$(document).ready(function() {    
    $("#btnPeriod").on('click', function(){
        var ahhhhh = "<security:authentication property="securityUser.fullName"/>";
        ahhhhh = ahhhhh.replace(/&#32;/g, " ");
        console.log(ahhhhh);

        $.extend($("#noticeList").jqGrid("getGridParam", "postData"),{
            filters : JSON.stringify({
                groupOp : "OR",
                rules : [{
                    field : "notiWriter",
                    op : "eq",
                    data : ahhhhh
                }],
                groups : []
            })
        });

        $("#noticeList").jqGrid("setGridParam", {
            search: true
        }).trigger('reloadGrid', [{ 
            current: true, 
            page: 1
        }]);
    });

    $("#btnPeriod").trigger('click');
});