Не считывает клик по кнопке, которая выводится через JS
Всем привет.
Прошу помощи. Есть несколько проблем. Есть массив с названием направления и ценами по разным категориям. При этом по направлениям не всегда есть цены по всем категориям. Изначально мне нужно вывести список всех направлений по заданной категории. И это не совсем работает у меня. Если я вывожу в консоль, то там он находит все нужные элементы. А если я вывожу в html, то выдает только последний элемент... Потом в этом же списке рядом с каждым направлением есть кнопка заказа, при нажатии на кнопку появляется форма, в которой некоторые поля уже заполнены данными из этого направления. Эта кнопка заказа отказывается работать... Не запускается функция. Хотя если я эту кнопку буду выводить не через JS, а сразу задам в html - то она работает...
var arrPrice = [
['Роза хутор',300,500,800,1000],
['Красная Поляна',200,400,800,1200],
['Сочи',400,600,1000,1500],
['Абхазия',1200,0,3000,0],
['Пляжи',200,0,0,0],
['Деревня',500,0,990,0],
];
$('#komfort-show').click(function comfortCalc() {
console.log('Показать тарифы Комфорт');
$('#komfort-container').fadeIn();
for (var i = 0; i < arrPrice.length; i++) {
var a = arrPrice[i][1];
if (a > 0) {
$("#komfort-price").html('<div class="row white-bg"><div class="col-sm-5"><span class="napravlenie">' + arrPrice[i][0] + '</span></div><div class="col-sm-3 text-center"><span class="napravlenie-price">' + arrPrice[i][1] + 'руб.' + '</span></div><div class="col-sm-4"><button class="cp-btn-style1 showform" id="showtestform">Заказать</button><div class="container-fluid form-container" id="form-comfort-1"><div class="row"><div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1"><form class="popup-form row"><div class="form-group col-sm-12"><label for="otkuda-comfort-id-' + i + '">Откуда забрать</label><input type="text" class="form-control" name="Откуда" id="otkuda-comfort-id-' + i + '" value="Аэропорт Сочи" readonly></div><div class="form-group col-sm-12"><label for="napravlenie-comfort-id-'+ i + '">Куда отвезти</label><input type="text" class="form-control" name="Куда" id="napravlenie-comfort-id-' + i + '" value="' + arrPrice[i][0] + '" readonly></div><div class="form-group col-sm-12"><label for="class-comfort-id-' + i + '">Класс автомобиля</label><input type="text" class="form-control" name="Класс" id="class-comfort-id-' + i + '" value="Комфорт" readonly></div><div class="form-group col-sm-12"><label for="price-comfort-id-' + i + '">Стоимость поездки</label><input type="text" class="form-control" name="Стоимость" id="price-comfort-id-' + i + '" value="' + arrPrice[i][1] + '" readonly></div><div class="form-group col-sm-12"><label for="data-comfort-id-' + i + '">Дата</label><input type="text" class="form-control" name="Дата" id="data-comfort-id-' + i + '" value=""></div><div class="form-group col-sm-12"><label for="reis-comfort-id-' + i + '">Номер рейса</label><input type="text" class="form-control" name="Рейс" id="reis-comfort-id-' + i + '" value=""></div><div class="form-group col-sm-12"><label for="name-comfort-id-' + i + '">Имя*</label><input type="text" class="form-control" name="Имя" id="name-comfort-id-' + i + '" value="" required></div><div class="form-group col-sm-12"><label for="phone-comfort-id-' + i + '">Телефон*</label><input type="text" class="form-control" name="Телефон" id="phone-comfort-id-' + i + '" value="" required></div><button type="submit" class="cp-btn-style1 form-button">Отправить заявку</button><div class="close-form">❌</div></form></div></div></div></div></div>');
}
}
});
$('#showtestform').click(function showtestform() {
console.log('Открыть форму');
$('#form-comfort-1').fadeIn();
});
$('.close-form').click(function closetestform() {
console.log('Закрыть форму');
$('#form-comfort-1').fadeOut();
});
Если эту форму смотреть в html, то выглядит она примерно так
<div class="row white-bg">
<div class="col-sm-5">
<span class="napravlenie">' + arrPrice[i][0] + '</span>
</div>
<div class="col-sm-3 text-center">
<span class="napravlenie-price">' + arrPrice[i][1] + 'руб.' + '</span>
</div>
<div class="col-sm-4">
<button class="cp-btn-style1 showform" id="showtestform">Заказать</button>
<div class="container-fluid form-container" id="form-comfort-1">
<div class="row">
<div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
<form class="popup-form row">
<div class="form-group col-sm-12">
<label for="otkuda-comfort-id-1">Откуда забрать</label>
<input type="text" class="form-control" name="Откуда" id="otkuda-comfort-id-1" value="Аэропорт Сочи" readonly>
</div>
<div class="form-group col-sm-12">
<label for="napravlenie-comfort-id-1">Куда отвезти</label>
<input type="text" class="form-control" name="Куда" id="napravlenie-comfort-id-1" value="' + arrPrice[i][0] + '" readonly>
</div>
<div class="form-group col-sm-12">
<label for="class-comfort-id-1">Класс автомобиля</label>
<input type="text" class="form-control" name="Класс" id="class-comfort-id-1" value="Комфорт" readonly>
</div>
<div class="form-group col-sm-12">
<label for="price-comfort-id-1">Стоимость поездки</label>
<input type="text" class="form-control" name="Стоимость" id="price-comfort-id-1" value="' + arrPrice[i][1] + '" readonly>
</div>
<div class="form-group col-sm-12">
<label for="data-comfort-id-1">Дата</label>
<input type="text" class="form-control" name="Дата" id="data-comfort-id-1" value="">
</div>
<div class="form-group col-sm-12">
<label for="reis-comfort-id-1">Номер рейса</label>
<input type="text" class="form-control" name="Рейс" id="reis-comfort-id-1" value="">
</div>
<div class="form-group col-sm-12">
<label for="name-comfort-id-1">Имя*</label>
<input type="text" class="form-control" name="Имя" id="name-comfort-id-1" value="" required>
</div>
<div class="form-group col-sm-12">
<label for="phone-comfort-id-1">Телефон*</label>
<input type="text" class="form-control" name="Телефон" id="phone-comfort-id-1" value="" required>
</div>
<button type="submit" class="cp-btn-style1 form-button">Отправить заявку</button>
<div class="close-form">❌</div>
</form>
</div>
</div>
</div>
</div>
</div>
|
строка 15
if (a > 0) аналог if (true) |
16 строка вместо
.append вместо .html |
Цитата:
Я пробовал там делать while, но это вешало браузер напрочь))) |
Цитата:
Осталось понять почему функция не вызывается с кнопки... |
так если не нужно, уберите 15 и 17 строку из кода
|
Цитата:
|
у вас айдишкники одинаковые в каждом таком элементе, устраните проблему.
|
the_little,
в вашем массиве по индексам [i][1] все элементы больше 0 наименьший там 200 |
Цитата:
|
Цитата:
Да, это я оставил на тестовый период, пока выводилась только одна запись. Сейчас сделал там тоже через i. Но проблема сохраняется. Клик по кнопке не срабатывает. Не то что не выводится форма. Даже в консоль не выводит сообщение, что кнопка нажата. И ошибок при этом нет. |
А как же тогда эту функцию переписать, чтобы менялся id?
$('#showtestform-0').click(function showtestform() {
$('#form-comfort-0').fadeIn();
});
Там возможно через классы нужно тогда делать... Делать .showtestform вместо id, находить ближайший div с классом, например form-container. Тогда id-ники вообще там не нужны будут. |
клик соответственно тоже надо на каждую повесить ЦИКЛОМ, сделайте обновленный пример
|
можно уже в имеющейся цикл на 13 строке, только после добавления всех потрохов
|
Событие надо вешать либо, когда форма уже "нарисована" (строки 21-29 поставить перед 19-й), либо можно так написать:
$('#komfort-price').on('click', '#showtestform', function showtestform() {
console.log('Открыть форму');
$('#form-comfort-1').fadeIn();
});
$('#komfort-price').on('click', '.close-form',function closetestform() {
console.log('Закрыть форму');
$('#form-comfort-1').fadeOut();
});
про айдишки - не вникла, тут же одна форма, не вижу, где они повторяются... |
Manyasha,
не одна, вы почитайте полностью темку. |
хотя нормальной практикой будет сделать одну, а информацию добавлять по клику на кнопку.
|
the_little,
Цитата:
|
Цитата:
там 4 кнопки, думал на каждую повесить свою функцию. |
Цитата:
наверное так будет действительно правильно. Если уж на то пошло, то формировать эти списки тоже можно не по клику, а при загрузке. а по клику - просто показывать этот список. я просто не догоняю, если я сделал одну форму - круто. то как при нажатии на разные кнопки туда инфо добавлять? так, есть мысли. сейчас все попробую переписать, чтобы одна форма была, и по клику только показывался блок. |
the_little,
все просто
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- какай-то информационный блок -->
<div>
<span>Тут какие-то данные 1</span>
<button>кнопка-1</button>
</div>
<!-- какай-то информационный блок -->
<div>
<span>Тут какие-то данные 2</span>
<button>кнопка-2</button>
</div>
----------------------------------
<!-- наша форма -->
<div id="form">
Это форма <br>
тут уже что-то есть
<p>сюда надо передать данные из блока</p>
</div>
<script>
$('button').click(function(){
var a = $(this).prev().text(); //берем нужные нам данные
$('#form p').text(a); // передаем в форму
});
</script>
прошу прощения за абстрактность |
Спасибо! Сейчас попробую на своем примере.
|
Всем спасибо! Сделал одну форму. Теперь в нее все подставляется. А таблицы с данными формируются не по клику а заранее. По клику просто появляются.
Получился такой вот код.
$(document).ready(function() {
var arrPrice = [
['Адлер',500,1000,800,2300],
['Олимпийский парк',500,1200,800,2300],
['Граница ПСОУ',500,1200,800,2500],
['Хоста',700,1500,1000,2800],
['Спутник',800,0,0,3500],
['Сочи Центр',900,2000,1700,4000],
['Мамайка',1000,0,1900,4300],
['Дагомыс',1300,2500,2500,5000],
['Лоо',1500,0,3000,6300],
['Вардане',1700,0,3600,7000],
['Шексна',1800,0,3600,7300],
['Головинка',2200,0,4500,9000],
['Чемитоквадзе',2400,0,4800,10000],
['Лазаревское' ,3200,6000,5600,11000],
['Аше',3600,0,6000,0],
['Магри',4000,0,7000,0],
['Шепси',4300,0,7200,0],
['Туапсе',4800,9000,7500,15000],
['Агой' ,5000,0,8200,0],
['Небуг',5300,0,8800,17000],
['Сосновый',5300,0,9000,0],
['Ольгинка',5500,0,10000,0],
['Новомихайловка',5700,0,10500,0],
['Джубга',6500,12000,11000,20000],
['Геленджик',8500,18000,12000,25000],
['Новороссийск',9000,0,13000,0],
['Анапа',10000,0,14000,0],
['Порт Кавказ',12000,20000,15000,0],
['Краснодар',8000,18000,12000,0],
['п.Красная Поляна',1200,0,2300,0],
['Эсто Садок',1300,0,2400,0],
['Роза Хутор',1300,3000,2500,6000],
['Горки Город высота 960',1500,0,2800,0],
['Горная Олимпийская деревня высота 1170',1700,0,3000,0],
['Газпром высота 1389',2000,0,3200,0],
['Республика Абхазия - Гагра',3500,0,6000,0],
['Республика Абхазия - Пицунда',4500,0,7000,0],
['Республика Абхазия - Гудаута',5000,0,8000,0],
['Республика Абхазия - Новый Афон',5500,0,9000,0],
['Республика Абхазия - Сухум',6500,0,10000,0],
['Республика Абхазия - о.Рица',5500,0,10000,0],
];
for (var i = 0; i < arrPrice.length; i++) {
var a = arrPrice[i][1];
if (a > 0) {
$("#comfort-price").append('<div class="row white-bg"><div class="col-sm-5"><span class="napravlenie">' + arrPrice[i][0] + '</span></div><div class="col-sm-3 text-center"><span class="napravlenie-price">' + arrPrice[i][1] + 'руб.' + '</span></div><div class="col-sm-4"><span class="span-class" style="display:none">Комфорт</span><button class="cp-btn-style1 showform">Заказать</button></div></div>');
}
var b = arrPrice[i][2];
if (b > 0) {
$("#business-price").append('<div class="row white-bg"><div class="col-sm-5"><span class="napravlenie">' + arrPrice[i][0] + '</span></div><div class="col-sm-3 text-center"><span class="napravlenie-price">' + arrPrice[i][2] + 'руб.' + '</span></div><div class="col-sm-4"><span class="span-class" style="display:none">Бизнес</span><button class="cp-btn-style1 showform">Заказать</button></div></div>');
}
var c = arrPrice[i][3];
if (c > 0) {
$("#miniven-price").append('<div class="row white-bg"><div class="col-sm-5"><span class="napravlenie">' + arrPrice[i][0] + '</span></div><div class="col-sm-3 text-center"><span class="napravlenie-price">' + arrPrice[i][3] + 'руб.' + '</span></div><div class="col-sm-4"><span class="span-class" style="display:none">Минивен</span><button class="cp-btn-style1 showform">Заказать</button></div></div>');
}
var d = arrPrice[i][4];
if (d > 0) {
$("#bus-price").append('<div class="row white-bg"><div class="col-sm-5"><span class="napravlenie">' + arrPrice[i][0] + '</span></div><div class="col-sm-3 text-center"><span class="napravlenie-price">' + arrPrice[i][4] + 'руб.' + '</span></div><div class="col-sm-4"><span class="span-class" style="display:none">Автобус</span><button class="cp-btn-style1 showform">Заказать</button></div></div>');
}
}
$('#comfort-show').click(function() {
$('#comfort-container').show();
$('#business-container').hide();
$('#miniven-container').hide();
$('#bus-container').hide();
});
$('#business-show').click(function() {
$('#comfort-container').hide();
$('#business-container').show();
$('#miniven-container').hide();
$('#bus-container').hide();
});
$('#miniven-show').click(function() {
$('#comfort-container').hide();
$('#business-container').hide();
$('#miniven-container').show();
$('#bus-container').hide();
});
$('#bus-show').click(function() {
$('#comfort-container').hide();
$('#business-container').hide();
$('#miniven-container').hide();
$('#bus-container').show();
});
$('.showform').click(function(){
$('.form-container').fadeIn();
var d = $(this).closest(".white-bg").find(".napravlenie").text();
$('#napravlenie-id').val(d);
var e = $(this).closest(".white-bg").find(".napravlenie-price").text();
$('#price-id').val(e);
var f = $(this).closest(".white-bg").find(".span-class").text();
$('#class-id').val(f);
});
$('.close-form').click(function closetestform() {
$('.form-container').fadeOut();
});
});
|
$('#comfort-show, #bus-show, #miniven-show, #business-show ').click(function() {
$('#comfort-container').show();
$('#bus-container, #business-container, #miniven-container').hide();
});
есть над чем работать |
47-64 строки
var arrClass = ['#comfort-price','#business-price', '#miniven-price', '#bus-price'];
for (var i = 0; i < arrPrice.length; i++) {
for (var j = 1; j < arrPrice[i].length; j++) {
var a = arrPrice[i][j];
if (a) $(arrClass[j-1]).append('<div class="row white-bg"><div class="col-sm-5"><span class="napravlenie">' + arrPrice[i][0] + '</span></div><div class="col-sm-3 text-center"><span class="napravlenie-price">' + a + 'руб.' + '</span></div><div class="col-sm-4"><span class="span-class" style="display:none">Комфорт</span><button class="cp-btn-style1 showform">Заказать</button></div></div>');
}
}
|
Цитата:
А у меня при нажатии на разные кнопки скрываются и показываются разные блоки. Но вот про такую запись всегда забываю. $('#bus-container, #business-container, #miniven-container').hide(); |
А как в массиве найти строку, в которой например первый элемент = 'Адлер'. Ну т.е. индекс нужен строки...
Все что нахожу касается поиска по одномерному массиву. |
Цитата:
|
Цитата:
arr.findIndex(el => el == 'Адлер');если не найдет вернет -1 |
Цитата:
var index = arrPrice.findIndex(el => el == 'Адлер'); выдает -1 |
var index = arrPrice.findIndex(el => el[0] == 'Адлер'); в вашем случае |
Цитата:
|
var arr = ['comfort','business','miniven','bus'];
arr.forEach(function(el){
$('#'+el+'show').click(function(){
$('#'+el+'container').show();
arr.forEach(function(elt){
if(elt!=el)$('#'+elt+'container').hide();
});
});
});
протестируйте |
| Часовой пояс GMT +3, время: 17:22. |