Не срабатывает on('click')
Никак не могу запустить функцию по щелчку... Посмотрите, пожалуйста, в чем ошибка?
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<body>
<div id="clickit">
<label class="pretty-upload">
<i class="mdi mdi-cloud-upload"></i>
<span class="upload-button-label">Текст</span>
</label>
</div>
<script>
$('body').on('click', 'div#clickit', function(e) {
alert('щелк!');
});
</script>
</body>
|
fi.adm,
где jquery? |
рони,
В каком смысле где? |
fi.adm,
На странице нет загрузки jQuery библиотеки, потому ничего и не работает. Или она загружается после этого кода, и потому ничего не работает |
Botik21,
Дописал здесь и на странице была. Сначала библиотека, потом кликабельный элемент, потом обработчик. Самое интересное, что если блок переписать вот так: <a href="#dialog" name="modal"><span class="upload-button-label">Текст</span></a> И сослаться на него 'a[name=modal]', все прекрасно работает. Как такое может быть? |
fi.adm,
вы что-то не договариваите
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<body>
<div id="clickit">
<label class="pretty-upload">
<i class="mdi mdi-cloud-upload"></i>
<span class="upload-button-label">Текст</span>
</label>
</div>
<script>
$('body').on('click', 'div#clickit', function(e) {
alert('щелк!');
});
</script>
</body>
|
Народ, а помогите мне тоже пожалуйста. Есть сайт: http://xn--80abl9cua.top/. Там есть кнопка вверху "Заказать звонок". Форма появляется, а вот по щелчку на крестик или на область, за пределами формы - не закрывается. Посмотрите пожалуйста, в чём причина?
callback.js:
// ========= (c)2015 :: html & css & jquery coding :: Polyakov - [url]http://polyakov.co.ua[/url] =========
// ========================================================================= 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').on('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').on('click', function() {
alert("Вы нажали крестик");
//$('#fade').fadeOut(function() {
// $('#fade').remove();
// $('#popup_close').remove();
// $('#popup').fadeOut();
//});
});
});
index.html: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Займы на обучение</title> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"> <link href="css/slider.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/callback.css"> <script type="text/javascript" src="js/script.js"></script> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript" src="js/list_drop.js"></script> <script type="text/javascript" src="js/callback.js"></script> </head> <body class="main"> ... Версия jQuery: 1.12.4 |
Делал по примеру как вот тут написано: http://polyakov.co.ua/page/forma-obr...azi-php-jquery
|
Либо делегируйте $('#popup_close, #fade').on('click' эту обработку body, либо устанавливайте этот обработчик указанным элементам при их создании.
|
Методом проб и ошибок, пришел к такому выводу:
// ========================================================================= contact_form
$(function() {
//Функция проверяет заполнено ли поле с телефоном
function formValide() {
var str = $('#contact_form input[name=contactFF]').val();
str = jQuery.trim(str);
if(str.length < 5){
alert ('Введите телефон');
return false;
}
return true;
}
//при нажатии на кнопку button нужной формы запускаем функцию обработки данных
$('#contact_form .button').on('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,{
nameFF: $('#contact_form input[name=nameFF]').val(),
contactFF: $('#contact_form input[name=contactFF]').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();
//функция закрытия окна
$('#popup_close, #fade').click(function(){
$('#fade').fadeOut(function() {
$('#fade').remove();
$('#popup_close').remove();
$('#popup').fadeOut();
});
});
return false;
});
});
И не забудьте сбросить кеш (ctrl + f5) !!! |
Цитата:
$('#contact_form').before... $('#contact_form').hide(); $('#contact_form').html(data); $('#contact_form').show(); уже плохо. Да и форма имеет событие onsubmit, которое выгоднее обрабатывать, нежели щелчки кнопки и плясать от нее. |
| Часовой пояс GMT +3, время: 02:31. |