динамически передавать параметр в 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% уверен, что это не то, как следует поступать.