Не срабатывает 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) !!! |
Часовой пояс GMT +3, время: 11:26. |