0
목록 (예 : 정렬되지 않은 목록)을 dinamically (런타임시 : 예 : Ajax)로 채우면 델리게이트 리스너를 추가하면 첫 번째 클릭이 작동하지 않습니다. 두 번째 클릭 후에 만 이벤트가 트리거됩니다. 아무도 이유를 아나요? 뭐가 문제 야? 대표와델리게이트 리스너를 추가하더라도 런타임에 목록을 동적으로 채운 후에 클릭 이벤트를 두 번 클릭해야합니다.
<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);
});
은 다시 : 첫 번째 클릭은 두 경우 모두에서 작동하지 않습니다. 두 번째 클릭 후 작동합니다.