Событие нажатия Javascript на динамически создаваемую кнопку внутри цикла

Question

Я уже рассмотрел все темы, связанные с проблемами события клика Javascript внутри цикла, прежде чем публиковать здесь:

Javascript - динамически назначать событие onclick в цикле

Как передать объект в событие onclick

Установка onclick для использования текущего значения переменной в цикле

Javascript печально известный вопрос петли?

Я протестировал такие предложения, как использование замыканий или функции JQuery и связывание, но мой код по-прежнему не работает. Вот текущее состояние моего кода:

 for (var key in hotels) {
    if (hotels.hasOwnProperty(key)) {
        for (var i = 0; i < hotels.HotelListResponse.HotelList.HotelSummary.length; i++) {
            hotelGlobal.push('<li style="font-size:18px;font-weight:bold;">' + '<button id="book-infos" class="btn btn-default" style="background-color:#ffc100;font-weight:bold;float:right;display:inline-block;">More</button><br/><hr/>');

            $(document).on( 'click', '#book-infos', function () {
                console.log(hotels.HotelListResponse.HotelList.HotelSummary[i]);
            });

        }
    }
}

$('ul[id="hotel-list"]').append(hotelGlobal);

По сути, я перебираю объект "Отели", в котором содержится вся информация об уникальном отеле, например, название, адрес, цены, фотографии номеров и т. Д. Затем в этом цикле я хотел добавить кнопку "Еще" для каждого уникального отеля. предметы в моем списке отелей. Когда пользователь нажимает "Дополнительно", он видит всплывающее окно со всей информацией, связанной с выбранной гостиницей, из списка. Я хочу знать, как я могу повлиять на переданный элемент i для уникальной кнопки и заставить работать событие click?

Answer 1

Я думаю, что вы должны сделать что-то вроде этого:

var hotels;
$('button').on( 'click', '#book-infos', function () {
    var id = this.attr('data-id');
    console.log(hotels.HotelListResponse.HotelList.HotelSummary[id]);
});

... функция AJAX или что-то, что дает вам отели:

hotels = responseData;
for (var key in hotels) {
    if (hotels.hasOwnProperty(key)) {
        for (var i = 0; i < hotels.HotelListResponse.HotelList.HotelSummary.length; i++) {
            hotelGlobal.push('<li style="font-size:18px;font-weight:bold;">' + '<button data-id="'+ i +'" id="book-infos" class="btn btn-default" style="background-color:#ffc100;font-weight:bold;float:right;display:inline-block;">More</button><br/><hr/>');
        }
    }
}