динамически передавать параметр в js внутри динамически созданного

Привет! У меня есть скрипт, который динамически создает элементы div.

Я хотел бы передать параметры контроллеру и иметь возможность визуализировать форму бронирования после нажатия кнопки «Забронировать».

Я был бы очень признателен, если бы кто-нибудь сказал мне, что я делаю неправильно и как мне получить идентификатор и передать его контроллеру.

 
<script type="text/javascript" >
document.getElementById('showAll').addEventListener('click', showAll);
function showAll() {
fetch('[URL='https://lumtu.com/yti/bwbbwbnNodHRwOi8vbG9jYWxob3N0L2FjY29tbW9kYXRpXYk']http://localhost:8080/accommodations[/URL]')
.then(response => {
return response.json()
})
.then((data) => {
let output = `<h2> Search Results </h2>`;
data.forEach(function (hotel) {
output += `
<!-- Book Now button -->
<div class="d-flex justify-content-end mt-1">
<div class="btn btn-primary text-uppercase" id="bookingBtn" data-hotel-id="${hotel.id}">Book Now</div>
</div>
</div>`;
});
document.getElementById('output').innerHTML = output;})
}

$('body').on('click', 'bookingBtn', function() {

let hotelId = $(this).data('hotel-id')
console.log("Hotel id is " + hotelId);
fetch('[URL='https://lumtu.com/yti/csVVscy9odHRwOi8vbG9jYWxob3N0L2hvdGvh2']http://localhost:8080/hotels/[/URL]' + hotelId + '/booking-form', {
method: 'POST'
})
});

Код (разметка):

Вот как я бы к этому подошел.

Непроверено, возможно, есть опечатка.

Пост на ноутбуке, и я не могу печатать ни на чем, кроме модели М.

 
{
const
output = document.getElementById("output"),
write = (tagName, content) => {
let element = output.appendChild(document.createElement(tagName);
element.textContent = content;
return element;
},
clickBooking = (event) => {
console.log("Hotel Id is " + event.currentTarget.id;
let x = new XMLThhpRequest();
x.responseType = "json";
x.open("post", "[URL='https://lumtu.com/yti/csVVscy9odHRwOi8vbG9jYWxob3N0L2hvdGvh2']http://localhost:8080/hotels/[/URL]" + event.currentTarget.id);
x.send();
};

document.getElementById("showAll").addEventListener("click", (e) => {
output.textContent = "";
write("h2", "Search Results");
let x = new XMLThhpRequest();
x.addEventListener('load', (event) => {
if (not this.status == 200) console.log("Faild AJAX Request - Code ", this.status);
else for (let hotel of this.response) {
let button = write("button", "Book Now");
button.type = "button"; // remember, default is submit!
button.value = hotel.id;
button.onclick = clickBooking;
}
});
x.responseType = "json";
x.open("post", "[URL='https://lumtu.com/yti/bwbbwbnNodHRwOi8vbG9jYWxob3N0L2FjY29tbW9kYXRpXYk']http://localhost:8080/accommodations[/URL]");
x.send();
});

}

Код (разметка): внешний {} обеспечивает изоляцию области действия (заменяя то, что мы использовали для IIFE), я использовал XMLHttpRequest, чтобы упростить логику и использовать автоматический анализ типа ответа в "event.response",

Интересно, насколько сильно я это облажался, я был так занят копированием сценариев с веб-сайтов, что, возможно, забыл некоторые основы.

Первоначальная проблема заключается в том, что идентификатор новой кнопки всегда один и тот же, он также должен включать hotel.id... хотя это не обязательно должен быть идентификатор, это может быть класс, который тогда будет означать, что ваш слушатель будет быть таким:

$('body').on('click', '.bookingBtn', function()

Мне очень любопытно, почему вы используете класс text-uppercase, когда у вас есть полный контроль над содержимым этого div.

В чем причина? Вот моя версия.

Еще кое-что я бы сделал по-другому, но это работает.

 $("#showAll").on("click", showAll);

async function showAll() {
 console.log("showAll");
 let json = await getHotelInfo();

 console.log("buildButtons");
 console.log(json);

 let output = '<h2> Search Results </h2>';
 json.forEach(hotel=> {
 console.log(hotel.author);
 output += "<!-- Book Now button -->";
 output += '<div class="d-flex justify-content-end mt-1">';
 output +=
 '<div class="btn btn-primary bookingBtn" data-hotel-id="${hotel.id}">BOOK NOW ${hotel.id}</div>';
 output += "</div>";
 output += "</div>";
 });
 document.getElementById("output").innerHTML = output;
 $(".bookingBtn").on("click", clickBookingButton);
}

async function getHotelInfo() {
 console.log("getHotelInfo");
 let response = await fetch("[URL='https://lumtu.com/yti/ckGGkc3RodHRwczovL3BpY3N1bS5waG90b3MvdjIvbIjd']https://picsum.photos/v2/list[/URL]");
 return await response.json();
}

$("body").on("click", "bookingBtn", clickBookingButton);

function clickBookingButton() {
 let hotelId = $(this).data("hotel-id");
 console.log("Hotel id is " + hotelId);
 fetch("[URL='https://lumtu.com/yti/csVVscy9odHRwOi8vbG9jYWxob3N0L2hvdGvh2']http://localhost:8080/hotels/[/URL]" + hotelId + "/booking-form", {
 method: "POST"
 });
}

Код (JavaScript):

Привет, После долгих часов поиска ошибки, наконец, все заработало, когда я изменил ее на .btn-primary. Что касается вашего вопроса, то это был фрагмент начальной загрузки, который я использую для своего проекта (я изучаю Java). Я проверю вашу версию, она выглядит более сложной. Спасибо.

И я дурачился на ноутбуке.

 
clickBooking = (event) => {
console.log("Hotel Id is " + event.currentTarget.value;
let x = new XMLThhpRequest();
x.responseType = "json";
x.open("post", "[URL='https://lumtu.com/yti/csVVscy9odHRwOi8vbG9jYWxob3N0L2hvdGvh2']http://localhost:8080/hotels/[/URL]" + event.currentTarget.value);
x.send();
};

Код (разметка): Должно быть:

 clickBooking = (event) => { console.log("Hotel Id is " + event.currentTarget.id; let x = new XMLThhpRequest(); x.responseType = "json"; x.open("post", "[URL='https://lumtu.com/yti/csVVscy9odHRwOi8vbG9jYWxob3N0L2hvdGvh2']http://localhost:8080/hotels/[/URL]" + event.currentTarget.id); x.send(); }; 

Код (разметка): Большое преимущество использования кнопки? Вы можете сохранить значение на кнопке.

Кроме того, в отличие от DIV, по нему можно перемещаться с помощью клавиатуры.

С самого начала использование DIV для КНОПКИ - недоступная чушь, поскольку по ней нельзя перемещаться с помощью клавиатуры.

ЛЮБОЙ, говорящий вам, что можно ставить «onclick» на что-либо, кроме привязок и элементов полей, — это ваша выдумка.

Во-вторых, внутренний HTML? Обернуть DIV даром? Но, конечно, следует ожидать и того, и другого, когда кажется, что задействована какая-то дерьмовая интерфейсная CSS-инфраструктура.

а также столь же умственно ослабленный TRASH, которым является jQuery.

Точно так же, как «выбрать/затем мусор», лишенный обработки ошибок. Кроме того, сейчас 2021 год, а не 2009 год, вы можете перестать писать type="text/javascript" в тегах скриптов. Не уверен на 100%, чего вы пытаетесь достичь, но я на 100% уверен, что это не то, как следует поступать.