javascript - 触发点击事件后如何执行警报

Question

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

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

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

Answer 1

With .queue(callback) you will add a new function to the end of the element's standard "fx" queue used for element effects (animations). So if the .click() event handler does not include any element animation, the .queue() callback will be effective immediately.

Answer 2

在这里，我已经为上述问题完成了完整的垃圾箱。请找到演示链接并检查出来..

演示： http ://codebins.com/bin/4ldqp7m

HTML

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

jQuery

$(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...!");
    });
});

CSS：

#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;
}

演示： http ://codebins.com/bin/4ldqp7m