javascript - クリックイベントのトリガー後にアラートを実行する方法

Question

トリガーイベントの実行後にアラートメッセージを実行しようとしています。私のコード：

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

ただし、ここで問題となるのは、トリガーイベント機能を完了する前にアラートが実行されていることです。私はここで何が間違っていますか？

Answer 1

.queue（callback）を使用すると、要素の効果（アニメーション）に使用される要素の標準の「fx」キューの最後に新しい関数を追加します。したがって、.click（）イベントハンドラーに要素アニメーションが含まれていない場合、.queue（）コールバックはすぐに有効になります。

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