0
リスト（例：順序付けられていないリスト）をdinamically（実行時：Ajaxなど）デリゲートリスナーを追加すると、最初のクリックはうまく動作しません。 2回目のクリック後のみ、イベントがトリガーされます。なぜ誰が知っていますか？どうしましたか？委任でリストを動的に（実行時に）追加しても、デリゲートのリスナーを追加しても、クリックイベントを2回クリックする必要があります。
委任なし
<body>
<input type="text" id="my-textbox"/>
<ul id="list"></ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var sayHello = function (e) {
e.preventDefault();
alert("Hi");
};
var fillList = function (e) {
var text = $(this).val();
var $ul = $('#list').empty();
for (var i = 0; i < text.length; i++) {
var $a = $('<a href="#">').text("List item " + i).on("click", sayHello);
var $li = $('<li>').append($a);
$ul.append($li);
}
};
$(document).ready(function() {
$("#my-textbox").on("keyup, change", fillList)
.bind("input propertychange", fillList);
});
</script>
</body>
（唯一の違いにスコープ）再び
var fillList = function (e) {
var text = $(this).val();
var $ul = $('#list').empty();
for (var i = 0; i < text.length; i++) {
var $a = $('<a href="#">').text("List item " + i); // here edited
var $li = $('<li>').append($a);
$ul.append($li);
}
};
$(document).ready(function() {
$("#list").on("click", 'a', sayHello); // and here edited
$("#my-textbox").on("keyup, change", fillList)
.bind("input propertychange", fillList);
});
：最初のクリックは、両方のケースでは動作しません。 2回目のクリック後、動作します。