Javascript 如何在触发单击事件后执行警报

我正在尝试在执行触发器事件后执行警报消息。我的代码：

 $(".addpage").trigger("click").queue(function () { 
  alert($(".page:first-child").attr("id")); 
 });

---

但这里的问题是警报在完成触发器事件函数之前执行。这里我做错了什么？

使用.queue（回调），您将在元素的标准“fx”队列末尾添加一个新函数，用于元素效果（动画）。因此，如果.click（）事件处理程序不包含任何元素动画，.queue（）回调将立即生效。

这里我已经完成了上述问题的完整BIN。请找到演示链接并查看

演示：

HTML

---

演示：

触发

单击
处理程序的作用是什么？一些动画还是ajax？如果您可以编辑页面源代码，那么您最好的解决方案是在其他地方。您是否正在寻找像这样的解决方案？您可以在jsfiddle.net上向我们展示一个演示吗
<ul id="pages">
  <li class="page" id="1">
    Page-1
  </li>
  <li class="page" id="2">
    Page-2
  </li>
  <li class="page" id="3">
    Page-3
  </li>
  <li class="page" id="4">
    Page-4
  </li>
</ul>

$(function() {
    $(".addpage").click(function(e) {
        var newId = parseInt($("#pages li.page:last").attr('id')) + 1;
        $("#pages").append("<li class='page' id='" + (newId) + "'>Page-" + (newId) + "</li>");

    });
    $(".addpage").trigger('click');
    $(".addpage").queue(function() {
        alert("New Page with Id #" + $("#pages li.page:last").attr('id') + " has been added...!");
    });
});

#pages{
  list-style:none;
  margin:5px;
  padding:2px;
  width:120px;

}
#pages li{
  border:1px solid #1A1A1A;
  width:120px;
  background:#4fdefd;
  text-align:center;

}
.addpage{
  background:#53a5f9;
  border:1px solid #1142fd;
}
.addpage:hover{
  background:#53cdfa;
}