Как сделать несколько кнопок для одной функции ?

[bilnaz]

Есть статья обратной связи

Там есть код функции:

// ================================================== ======================= contact_form
$(function() {
//Функция проверяет заполнено ли поле с телефоном
function formValide() {
var str = $('#contact_form input[name=tel]').val();
str = jQuery.trim(str);
if(str.length < 5){
alert ('Введите телефон');
return false;
}
return true;
}

//при нажатии на кнопку button нужной формы запускаем функцию обработки данных
$('#contact_form .button').live('click', function() {
if (formValide()) {
//если форма прошла проверку, выводим блок с текстом ожидания
$('#contact_form').before('<h3 id="contact_form_info">Оформление заявки. Подождите...</h3>');
$('#contact_form').hide();
//берем путь php обработчика
order_url = $('#contact_form').attr('action');
//посылаем асинхронный запрос на сервер и передаем все данные формы
$.post(order_url,{
name: $('#contact_form input[name=name]').val(),
tel: $('#contact_form input[name=tel]').val(),
email: $('#contact_form input[name=email]').val(),
message: $('#contact_form textarea[name=message]').val(),
send: "1"
}, function(data) {
//выводим возврашаемый сервером код html вместо содержимого формы
$('#contact_form').html(data);
$('#contact_form').show();
$('#contact_form_info').remove();
}, "html");
}
return false;
});
});

// ================================================== ======================= go_order
$(function() {
//фкнкция вызова формы обратной связи
$('#callback').click(function(){
//появление окна обратной связи
$('#popup').fadeIn();
//добавляем к окну иконку закрытия
$('#popup').append('<a id="popup_close"></a>');
//расчитываем высоту и ширину всплывающего окна что бы вывести окно прямо по центру экрана
q_width = $('#popup').outerWidth()/-2;
q_height = $('#popup').outerHeight()/-2;
$('#popup').css({
'margin-left': q_width,
'margin-top': q_height
});
//выводим затемение страницы и делаем полупрозрачным
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=40)'}).fadeIn();
return false;
});

//функция закрытия окна
$('#popup_close, #fade').live('click', function() {
$('#fade').fadeOut(function() {
$('#fade').remove();
$('#popup_close').remove();
$('#popup').fadeOut();
});
});

});


И кнопка вызова через id="callback"

Есть пхп файл (но он думаю не нужен)
Ксс (тоже)
и форма:

<div id="popup">
<form id="contact_form" role="form" method="post" action="./php/order.php">
<h3>Напишите нам</h3>
<input type="text" name="name" placeholder="Как к вам обращаться?">
<input type="text" name="tel" class="required" placeholder="Контакный телефон (обязательно)">

<input type="hidden" name="send" value="1">
<textarea name="message" placeholder="Текст сообщения(НЕ обязательно)" rows="5"></textarea>
<a href="#" class="btn button form_submit">Заказать</a>
</form>
</div>


Вопрос вот в чём. Делаю несколько кнопок по сайту вызова функции callback. Работает только одна. из трёх.

Прошу не пинать сразу т.к. прошёлся по форуму и нашёл похожую проблему и решение в виде:

Там у чувака было:
$("#prone").click(function () {
alert (this.name);
});


Потом он решил вот так:
$('.prone').bind('click', function(){
alert(this.name);
});

а ко всем нужным кнопкам добавил class='prone' и все!

но у меня не получилось (( Помогите плиз((:cray:

[bilnaz]

Пробовал по аналогии. Т.е. поменял вот эту строку

$('#callback').click(function(){
на эту
$('.callback').bind('click', function(){


и ссылку сделал не id=callback а class=callback

Но не работает((

[рони]

bilnaz,
jquery какая версия?

[bilnaz]

jquery-1.7.2.min.js

Но подключаю не из гугла

[Dilettante_Pro]

<button id="callback" class="phone">Первая</button>
<button class="phone">Вторая</button>
<button class="phone">Третья</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$(".phone").click(function () {
alert (this.innerText);
});
});

</script>

[рони]

class=callback
$(function() {
//фкнкция вызова формы обратной связи
$('.callback').click(function(){
//появление окна обратной связи
$('#popup').fadeIn();
//добавляем к окну иконку закрытия
$('#popup').append('<a id="popup_close"></a>');
//расчитываем высоту и ширину всплывающего окна что бы вывести окно прямо по центру экрана
q_width = $('#popup').outerWidth()/-2;
q_height = $('#popup').outerHeight()/-2;
$('#popup').css({
'margin-left': q_width,
'margin-top': q_height
});
//выводим затемение страницы и делаем полупрозрачным
$('body').append('<div id="fade"></div>');
$('#fade').fadeIn();
return false;
});

//функция закрытия окна
$('body').on('click', '#popup_close, #fade',function() {
$('#fade').fadeOut(function() {
$('#fade').remove();
$('#popup_close').remove();
$('#popup').fadeOut();
});
});

});

[bilnaz]

Обновил javascript на полную версию.

Спасибо Dilettante_Pro за попытку, но так же неработает..(
1) с jquery-1.7.2.min.js Одна кнопка так же обрабатывается а другие две просто с классом никак не хотят. Да ещё окно выскакивает подтверждения события

А с "../1.12.4/jquery.min.js" вообше никакой реакции..

[рони]

bilnaz,
css скиньте

[рони]

css скиньте
уже не надо, смотрите что у вас не так?
<!DOCTYPE html>

<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#popup {
display: none;
left: 50%;
position: fixed;
top: 50%;
z-index: 2000;
background:#eeeeee;
width:420px;
height: 330px;
padding:10px 20px 20px 20px;
}
*html #popup {
position: absolute;
}

#popup h3{
color:#ab6969;
font-size:30px;
font-weight:normal;
text-transform:uppercase;
text-align:left;
margin-bottom:20px;
}

#popup p {
padding-bottom:15px;
text-align: center;
}

#imgcode {
float:left;
}

#popup input[type=text] {
text-align:left;
width:268px;
padding:0 10px;
height:30px;
display:block;
margin:10px 0px;
border:1px solid #eee;
border-top-color:#ccd1d7;
color:#000000;
background:#ffffff;
font-family: Arial, Tahoma, sans-serif;
font-size: 12px;
}
#popup textarea {
text-align:left;
width:398px;
padding:10px 10px;
display:block;
margin:10px 0px;
border:1px solid #eee;
border-top-color:#ccd1d7;
color:#000000;
background:#ffffff;
font-family: Arial, Tahoma, sans-serif;
font-size: 12px;
height: 80px;
}
#popup .button {
font-size: 16px;
box-sizing: border-box;
background: #ab6969;
width: 140px;
height: 35px;
line-height: 35px;
display: block;
text-align: center;
text-decoration: none;
color: #ffffff;
float:right;
text-shadow: none;
border: 1px solid #705062;
border-radius: 0;
}
#popup .button:hover {
background: rgba(171, 105, 105, 0.88);
}

#popup_close {
display:block;
position: absolute;
top: 10px;
right: 10px;
width: 12px;
height: 12px;
background: url(http://lessons.polyakov.co.ua/popup/images/close.png) no-repeat center center;
cursor: pointer;
z-index: 2103;
}

#popup_close:hover {
opacity:0.7;
transform: rotate(90deg);
transition: all 0.5s ease-in-out 0s;
}
#fade {
display: none;
background: #2c3e50;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .50;
z-index: 1000;
}

*html #fade {
position: absolute;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
// ================================================== ======================= go_order
$(function() {
//фкнкция вызова формы обратной связи
$('.callback').click(function(){
//появление окна обратной связи
$('#popup').fadeIn();
//добавляем к окну иконку закрытия
$('#popup').append('<a id="popup_close"></a>');
//расчитываем высоту и ширину всплывающего окна что бы вывести окно прямо по центру экрана
q_width = $('#popup').outerWidth()/-2;
q_height = $('#popup').outerHeight()/-2;
$('#popup').css({
'margin-left': q_width,
'margin-top': q_height
});
//выводим затемение страницы и делаем полупрозрачным
$('body').append('<div id="fade"></div>');
$('#fade').fadeIn();
return false;
});

//функция закрытия окна
$('body').on('click', '#popup_close, #fade',function() {
$('#fade').fadeOut(function() {
$('#fade').remove();
$('#popup_close').remove();
$('#popup').fadeOut();
});
});

});

</script>
</head>

<body>
<div id="popup">
<form id="contact_form" role="form" method="post" action="./php/order.php">
<h3>Напишите нам</h3>
<input type="text" name="name" placeholder="Как к вам обращаться?">
<input type="text" name="tel" class="required" placeholder="Контакный телефон (обязательно)">

<input type="hidden" name="send" value="1">
<textarea name="message" placeholder="Текст сообщения(НЕ обязательно)" rows="5"></textarea>
<a href="#" class="btn button form_submit">Заказать</a>
</form>
</div>
<button class="callback">callback01</button>
<button class="callback">callback02</button>
<button class="callback">callback03</button>
<button class="callback">callback04</button>
<button class="callback">callback05</button>
<button class="callback">callback06</button>
<button class="callback">callback07</button>
<button class="callback">callback08</button>
<button class="callback">callback09</button>
<button class="callback">callback10</button>
<button class="callback">callback11</button>
<button class="callback">callback12</button>
<button class="callback">callback13</button>
<button class="callback">callback14</button>
<button class="callback">callback15</button>
<button class="callback">callback16</button>
<button class="callback">callback17</button>
<button class="callback">callback18</button>
<button class="callback">callback19</button>
<button class="callback">callback20</button>
</body>
</html>

[bilnaz]

ДА!) Всё заработало!) Спасибо Вам огромное рони !:yes:

Возможно и у Dilettante_Pro тоже всё работало, просто у меня руки видимо недостаточно прямые..))

[Dilettante_Pro]

bilnaz,
Возможно и у Dilettante_Pro тоже всё работало
Что значит - возможно? А вы запускали пример пост 5?