Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Почему срабатывает именно эта функция?

Здравствуйте!

На , если изучать инструментами разработчика Хром, то видно, что на нажатие кнопки Добавить в корзину завязана функция Virtuemart.addtocart = function (e){... , размещенная в сайт/components/com_virtuemart/assets/js/vmprices.js
при этом в определении функции я не вижу, что она должна срабатывать для события onclick. Почему же именно эта функция срабатывает при клике на кнопку "Добавить в корзину"? В таком определении функции по умолчанию подразумевается только onclick?
Ответ:
Сообщение от Rise
borus, определение функции никакого отношения к событиям не имеет... Если поискать Virtuemart.addtocart по vmprices.js то можно найти:
jQuery(addtocart).on('click', {
    cart: cart
}, Virtuemart.addtocart);

Пользуйся поиском по файлу...
спасибо!
Вопрос: Работа jquery-ui sortable нарушается обработчиком click (срабатывает при отпускании)

Имеется такой код
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
var imgDiv = $('#img-div'), imgList = $('.p__image', imgDiv);
 
imgList.sortable({containment: "parent"});
 
imgList.on('click', '.img__close, .img__cell', function(e) {
    e.preventDefault();
    var el = $(this);
    if(el.hasClass('img__cell'))
        el.prependTo(imgList);
    else
        el.parent().unbind('mouseenter').trigger('mouseleave').remove();
    return false;
});
Плагин sortable обеспечивает драг н дроп элементов. Обработчик клика на imgList делает элемент первым.
Проблема в том, что при перетаскивании элемента, в момент его отпускания срабатывает обработчик события click.
Непонятно, почему происходит событие click, когда должно быть вроде бы mouseup.
В результате, любой перетаскиваемый элемент становится первым, после того как мы его отпускаем.
Ответ:
Сообщение от eugenex
при перетаскивании элемента, в момент его отпускания срабатывает обработчик события click.
Непонятно, почему происходит событие click, когда должно быть вроде бы mouseup.
Почитайте внимательно про события мыши, и тогда не будет вопросов. Click - это последовательность mousedown и mouseup. И в вашем случае, естественно, следом за mouseup тут же срабатывает click.
Вопрос: JS Почему срабатывает событие по добавлению строки таблицы?

Здравствуйте.

Ниже код, который формирует таблицу - dataTables
в которой есть быстрый поиск, сортировка столбцов по имени
и есть кнопка по нажатию, которой добавляется строка сверху и наполняется
такой информацией
1.1 1.2 1.3

<script src="js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="js/dataTables.bootstrap.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/jquery.dataTables.min.css">
<link rel="stylesheet" href="css/dataTables.bootstrap.min.css">


<script type="text/javascript">
$(document).ready(function() {
    var dataSet = [
       [ "Tiger", "Nixon", "user1"],
        [ "Garrett", "Winters", "user2", ]
    ];

var t = $('#example').DataTable(

        {
            data: dataSet,
            columns: [
                { title: "Фамилия" },
                { title: "Имя" },
                { title: "Пользователь" }
            ]
        }

);
var counter = 1;

$('#addRow').on( 'click', function () {
t.row.add( [
counter +'.1',
counter +'.2',
counter +'.3'
] ).draw( false );
counter++;
} );

// Automatically add a first row of data
$('#addRow').click();
} );
</script>
<div class="container">
<button id="addRow" class="btn btn-success"><i class="glyphicon glyphicon-ok-sign" ></i> Добавить строку</button>
<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
    <tr>
        <th>Фамилия</th>
        <th>Имя</th>
        <th>Пользователь</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
        <th>Фамилия</th>
        <th>Имя</th>
        <th>Пользователь</th>

    </tr>
    </tfoot>
</table>
</div>


Проблема в том, что даже при первоначальном запуске формы сразу уже срабатывает событие по добавлению строки.

Подскажите, где ошибка.
Ответ: drno,

проблема решена

// Automatically add a first row of data
// $('#addRow').click();
Вопрос: Неправильно срабатывает обработчик событий

В общем не могу разобраться в чем косяк!
В общем при первом нажатии medals.click все работает отлично, при втором medals.click неправильно работает обработчик rightButtonScroll.click... срабатывает сразу несколько раз и выдает последний результат!

var medals = $(".medalBlock a");
var sportsmen = [medalists.Gold, medalists.Silver, medalists.Bronse];
var num, medalNum;

medals.click(function() {
    
    num = 0;

    if (this === medals[0] ) { medalNum = 0; }
    if (this === medals[1] ) { medalNum = 1; }
    if (this === medals[2] ) { medalNum = 2; }
  
    rotateSportsmenList();

    rightButtonScroll.click(function() {     
        if ((num+1) < sportsmen[medalNum].length) { 
            num++; 
            rotateSportsmenList();
        }
    });

    leftButtonScroll.click(function() {     
        if (num > 0) { 
            num--; 
            rotateSportsmenList(); 
        }
    });

    function rotateSportsmenList(){
        statusScroll.text(num+1 + " из " + sportsmen[medalNum].length);
        nameSportsmenBlock.html(sportsmen[medalNum][num].name);
        $(".sportsmenImgBlock a").css({background: "url("+sportsmen[medalNum][num].imagesURL +") no-repeat"});
        sportsmenBiographyBlock.text(sportsmen[medalNum][num].biography);
    }

});



кстати, раз уже спрашиваю, то почему-то не работает конструкция для данного когда:

for (var i = 0; i < medals.length; i++) {
    (function(k) {
        medals[k].click(function(e) {
         
        });
    })(i);
}


только давайте без мата, и без тупых советов типа "иди еще раз прочитай главу о замыканиях"! если нету желания помочь - то иди себе мимо с Богом!)
Ответ:
Сообщение от inflexible
иди еще раз прочитай главу о замыканиях
Все правильно вам советовали. Надо еще раз завернуть все медали в div который и контролировать и тогда не придется развешивать на все медали функцию в цикле. Навскидку останется процентов 10 от этой тряхомудии.
Вопрос: Обработчик события срабатывает без события! Подскажите пожалуйста

Здравствуйте знатоки!
Подскажите пожалуйста. При запуске страницы должен отображаться только первый div id=div_log_in. Второй div id=div_registration_user должен отображается после нажатия на кнопку button id=new_user_button и скрывать первый div. В скрипте прописана функция которая скрывает все не нужные div и показывает тот который нам нужен. Так вот. Обработчик кнопки срабатывает без нажатия на эту кнопку, т.е. при запуске сразу скрывается первый div и показывается второй. На 52й строчке как раз срабатывает обработчик. А этого не надо делать.
Благодарю!

<body>

	<div id="div_log_in" class="bblock">
		<p>Enter your name
			<input type="text" name="" id="name_user2">
		</p>
		<p>Enter your password
			<input type="text" name="" id="password_user2">
		</p>
		<p>
			<input type="button" name="" value="Log in" id="login_button">
			<input type="button" name="" value="New user" id="new_user_button">
		</p>
	</div>

	<div id="div_registration_user" class="bblock">
		<p>Enter your name
			<input type="text" name="" id="name_user">
		</p>
		<p>Enter your password
			<input type="text" name="" id="password_user">
		</p>
		<p>Enter your email
			<input type="text" name="" id="email_user">
		</p>
		<p>Choose your role
			<select name="" id="role_user">
				<option value="customer">Покупатель</option>
				<option value="contractor">Поставшик</option>
			</select>
		</p>
		<p>
			<input type="button" name="" value="Registration" id="registration_user_button">
		</p>
	</div>

	<script>
		//ОТОБРАЖЕНИЕ БЛОКА div С КОТОРЫМ МЫ РАБОТАЕМ И СКРЫТИЕ ОСТАЛЬНЫХ
		function func_display_div(work_div) {
			var all_div = document.getElementsByClassName('bblock');
			for (var i = 0; i < all_div.length; i++) {
				all_div[i].style.display = 'none';
			}
			work_div.style.display = 'block';
		}

		//НАЧАЛО СЦЕНАРИЯ. ОТОБРАЖАЕТСЯ БЛОК DIV_LOG_IN
		func_display_div(div_log_in);

		// BUTTON NEW USER. СКРЫТИЕ БЛОКА DIV_LOG_IN И ОТОБРАЖЕНИЕ БЛОКА DIV_REGISTRATION_USER
		var new_user = document.getElementById('new_user_button');
*!*
		new_user.addEventListener("click", func_display_div(div_registration_user));
*/!*
	</script>
</body>
Ответ: Не мучайте задницу. Тут нет никакого смысла передавать аргумент div_registration_user. Сделай его где-нибудь уже и тогда new_user.addEventListener("click", func_display_div);
Вопрос: Почему срабатывает после 2 клика?

Ув. гуру!
Прошу помогите найти ошибку - в яваскрипте я плох

Значит выводится вот такая форма:
CODE (html):

  1. <form action='/engine/ajax/my_votepost.php' method='POST' id='votepost' onsubmit='doVotePost(1,2,3); return false;'> ... </form>


Вот функция:
CODE (javascript):

  1. function doVotePost (who,kogo,newsid) {
  2.   $('#votepost').submit(function(e){
  3.     e.preventDefault();
  4.     var m_method=$(this).attr('method');
  5.     var m_action=$(this).attr('action');
  6.     var m_data=$(this).serialize();
  7.     $.ajax({
  8.       type: m_method,
  9.       url: m_action,
  10.       data: m_data+"&who="+who+"&kogo="+kogo+"&newsid="+newsid,
  11.       success: function(result){
  12.           $('#votepost').html(result);
  13.       }
  14.     });
  15.   });
  16. };


В результате скрипт работает, возвращается нужный result, но это происходит только после 2-ого клика по кнопке SUBMIT. Почему?

Если в яваскрипте удалить вот эту строку (оставить то, что внутри, но удалить конкретно вот это), то скрипт срабатывает после первого же клика, НО вместо возвращения result перекидывает на /engine/ajax/my_votepost.php и выводит результат там
CODE (javascript):

  1. $('#votepost').submit(function(e){ };



Что не так с $('#votepost').submit(function(e){ ?
(Добавление)
Проблема решена:

CODE (javascript):

  1. $(document).on('submit', '#votepost', function (e) {
  2.   var form = $(this);
  3.  
  4.   e.preventDefault();
  5.   $.ajax({
  6.     type: this.method,
  7.     url: this.action,
  8.     data: form.serialize()
  9.   }).done(function (result) {
  10.     form.html(result);
  11.   });
  12. });
Ответ:
DeepVarvar пишет:
а куда-то по-локальнее, поближе к формам

"девушка, какие формы"


-----
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Вопрос: Всплытие событий и this, странное поведение

Всем привет!
Объясните дураку, почему так происходит:
Создаю объект с шаблонной функцией, в теле функции используется ключевое слово this, через него пытаюсь получить имя тэга на котором произошло событие, эту функцию назначаю как событие клик двум кнопкам и все работает чудесно, но если вдобавок назначить эту же функцию как клик по BODY, то происходит следующее:
  • кликаю по кнопке (любой из двух) первый раз, срабатывает как надо (событие кнопки, затем событие body)
  • кликаю второй раз (опять же не важно по какой, той же или по соседу), и срабатывает только событие BODY игнорируя событие кнопки
  • дальше куда не кликай срабатывает только событие BODY, событие кнопки кликом мыши вызвать не удается, можно вызвать только через dispatchEvent

Предполагаю, что что-то не то с this, но не пойму, что именно...
Исходник прилагается. Заранее Спасибо!

<html>
	<head></head>
	<body>
		<button id="xxxz">0001</button>
		<button id="xxxx">0002</button>
		<script>
			var q = {
				xxx:function (){
					this.innerHTML += this.tagName;
				}
			}

			
			var x = document.getElementById('xxxz');
			x.addEventListener('click',q.xxx);

			var z = document.getElementById('xxxx');
			z.addEventListener('click',q.xxx);
			
			document.body.addEventListener('click',q.xxx);
		</script>
	</body>
</html>
Ответ: Это про "серелизацию" он правильно написал? ))) Типа покакал - провел серилизацию. Угораю с вас.

Сериализация - вот как пишется селяне.

Пойду бухану с горя... )))
Вопрос: "Убить" событие скролл jQuery

Здравствуйте.Прошу помощи.Обрабатываю событие scroll..
Столкнулся с проблемой следующего характера..
Порядок действий:
1-загрузил страницу-alert("scroll") не срабатывает-все верно.
2-прокрутил страницу -alert("scroll") сработало-все верно.
3-нажал на кнопку "обновить страницу" -alert("scroll") - снова сработал!!!!-в чем собственно и есть проблема.
Почему срабатывает событие scroll при обновлении страници??
И да-когда страница вообще не прокручена,то-есть scrollTop=0, при обновлении по кнопке событие не срабатывает
Javascript
1
2
3
4
5
$(document).ready(function(){
    $(window).scroll(function(event){
        alert("scroll");
    });
});
В чем проблема?И как исправить?
Требуется вызов scroll только по скролу...
Спасибо
Ответ: Хорошо..А как тогда игнорировать обновление??
Чтобы вернуть false при обновлении..То-есть если страница обновилась-никаких действий не производить..
Вопрос: Событие onmouseout при наведении мышки на дочерний элемент

Доброго времени суток. Помогите пожалуйста решить проблему. Ситуация такая:
По кнопке СТАРТ создается серый контейнер. Внутрь контейнера при помощи цикла for создаются боксы по елементам из массива box_names. Внутрь каждого бокса помещается еще один див блок со значением 25.
При создании каждого бокса в цикле выполняется make_title.call(box, x), (ст. 30 в коде), которая создает подсказку к этому блоку (по стилю она невидима, opacity 0).
Функция make_title на каждый бокс вешает события onmouseover, onmousemove, onmouseout. По сути, это появление/движение/исчезновение подсказки.
И все замечательно, только беда заключается в том, что когда мышка заскакивает на блок со значением 25 или обратно выскакивает из этого дочернего блока на основной блок box, подсказка мигает.
В этом моменте почему-то срабатывает событие onmouseout и тут же срабатывает снова событие onmouseover.
Как убрать это мигание?

Если убрать ф-цию плавного появления блока и сделать ее мгновенно при наведении курсора (т.е закомментить строки 45, 46, и убрать коммент в строке 44, то мигания не происходит.

<style type='text/css'>
.button{color:blue; width:70px; cursor:pointer; background-color:#94E947; border:1px solid black; text-align:center}
.block_container{position:absolute;top:35px;width:200px;height:100px;background-color:#BDBDBD;border:1px solid red;padding-left:5px;}	
.boxes{width:32px; height:32px; border:1px solid black; display:inline-block; font-family:Arial; font-size:14px;margin-top:2px; margin-right:5px; margin-bottom:2px; text-align:center; cursor:default }
.box_value{ width: auto;outline:1px solid white; outline-offset:-1px; float:right; color:white; font-family:Arial; font-size:12px; line-height:12px; cursor:default; }
.title{ position:absolute; width:auto; max-width:250px; height:auto; display:block; border: 1px solid #bd851b;  padding:8px; padding-top:3px; font-family: Tahoma; font-size:11px; line-height:12px; color:#dfb972; background-color:#414141; opacity:0 }
</style>

<div class='button' onClick='create_blocks(this)'>СТАРТ</div>

<script>
var box_names = ['Раз', 'Два', 'Три']//сколько элементов, столько и блоков
function create_blocks(btn){
	btn.onclick = '';//снимаем с кнопки СТАРТ ф-цию
	var block_div = document.createElement('div');//создаем контейнер для блоков
		block_div.className = 'block_container';
		document.body.appendChild(block_div);
	
	for(x=0; x<box_names.length; x++){//создадим блоки внутри контейнера
		var box = document.createElement('div');//сам блок box
		box.className = 'boxes';//присваиваем класс
		box.innerHTML = box_names[x];//пишем в блок елемент массива по которому создался блок

	
		var box_value = document.createElement('div');//блок box_value внутри блока box
		box_value.className = 'box_value';
		box_value.innerHTML = 25;
		box.appendChild(box_value);
		document.getElementsByClassName('block_container')[0].appendChild(box);
		make_title.call(box, x);//каждому блоку box повесим функцию появления подсказки		
	}
}

function make_title(box_numb){// создает невидимый блок подсказки и вешает события на блок box для ее появления
	var box_title = document.createElement('div');
	box_title.className = 'title';
	box_title.innerHTML = box_names[box_numb]
	document.body.appendChild(box_title);//создали подсказку, вставили на страницу, подсказка невидима
			
	this.onmouseover = function(){//делаем подсказку видимой
		box_title.style.left = mouseX+10+'px';
		box_title.style.top = mouseY+10+'px';
		box_title.style.visibility = 'visible';
		//box_title.style.opacity = 1;
		i = 0;
		change_opacity(box_title, 20, 0);// функция плавного появления подсказки
	}
	this.onmousemove = function(){//двигаем подсказку за курсором	
		box_title.style.left = mouseX+10+'px';
		box_title.style.top = mouseY+10+'px';
	}
	this.onmouseout = function(){//прячем подсказку
		box_title.style.opacity = 0;
		box_title.style.visibility = 'hidden';
	}
}

function change_opacity(elem, time){//функция плавного появления подсказки; elem = елемент еоторый будет плавно появляться, time = время появления
	itm = elem;
	tm = time;
	 if (i < tm) {
	  itm.style.opacity= ++i/tm
	  setTimeout('change_opacity(itm, tm)', tm)
	 }
}

//далее определение координат курсора
var mouseX;
var mouseY;
function mousePageXY(e){
	if (!e) e = window.event;
	if (e.pageX || e.pageY){
	mouseX = e.pageX;
	mouseY = e.pageY;
	}
	else if (e.clientX || e.clientY){
	mouseX = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
	mouseY = e.clientY + (document.documentElement.scrollTop  || document.body.scrollTop)  - document.documentElement.clientTop;
	}
}
document.onmousemove = function(e){mousePageXY(e); }
</script>
Ответ: рони, спасибо вам за решение и за ссылку. Я копал в эту сторону больше дня, но я не программист, не хватает знаний и навыков. Хорошо что есть такой форум
Вопрос: Срабатывание событий при Drag&Drop

Добрый вечер. Имеется 4 колоны. Нужно, чтобы срабатывало событие при drag&drop. Нормально можно реализовать, только если я перевожу карту из одного блока в другой, а нужно, чтобы из всех во все.

Код отвечающий за события, изначально были кнопки, теперь нужно drag&drop.
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$buttons = '';
        foreach($taskColumnId as $id) {
          if (empty($buttons)) {
            switch ($id) {
            case 1:
              if ($task["RESPONSIBLE_ID"] == $userId) $buttons.= '<button class="btn btn-raised btn-success" id="nach" onclick="scrum.action(this,' . $task["ID"] . ',3);">Начать выполнение</button>';
              if ($task["RESPONSIBLE_ID"] == $userId || $task["CREATED_BY"] == $userId) $buttons.= '<button class="btn btn-raised btn-success" onclick="scrum.action(this,' . $task["ID"] . ',5);">Завершить</button>';
              break;
 
            case 2:
              if ($task["RESPONSIBLE_ID"] == $userId) $buttons.= '<button class="btn btn-raised btn-success" onclick="scrum.action(this,' . $task["ID"] . ',3);">Начать выполнение</button>';
              if ($task["RESPONSIBLE_ID"] == $userId || $task["CREATED_BY"] == $userId) $buttons.= '<button class="btn btn-raised btn-success" onclick="scrum.action(this,' . $task["ID"] . ',5);">Завершить</button>';
              break;
 
            case 3:
              if ($task["RESPONSIBLE_ID"] == $userId) $buttons.= '<button class="btn btn-raised btn-success" id="nach1" onclick="scrum.action(this,' . $task["ID"] . ',2);">Приостановить</button>';
              if ($task["RESPONSIBLE_ID"] == $userId || $task["CREATED_BY"] == $userId) $buttons.= '<button class="btn btn-raised btn-success" onclick="scrum.action(this,' . $task["ID"] . ',5);">Завершить</button>';
              break;
 
            case 4:
              if ($task["CREATED_BY"] == $userId) {
                $buttons.= '<button class="btn btn-raised btn-success" onclick="scrum.action(this,' . $task["ID"] . ',5);">Принять работу</button>';
                $buttons.= '<button class="btn btn-raised btn-success" onclick="scrum.action(this,' . $task["ID"] . ',2);">Доделать</button>';
              }
 
              if ($task["RESPONSIBLE_ID"] == $userId) $buttons.= '<button class="btn btn-raised btn-success" id="nach2" onclick="scrum.action(this,' . $task["ID"] . ',2);">Возобновить</button>';
              break;
 
            case 5:
              if ($task["CREATED_BY"] == $userId || $task['RESPONSIBLE_ID'] == $userId) $buttons.= '<button class="btn btn-raised btn-success" onclick="scrum.action(this,' . $task["ID"] . ',2);">Возобновить</button>';
              break;
 
            default:
              break;
            }
          }
        }
В JS:
Javascript
1
2
3
4
5
6
7
8
9
$(function() {
        $('#tasksCart_11, #tasksCart_13, #tasksCart_14, #tasksCart_15').sortable({
                connectWith: '.connectedSortable',
        change: function( event, ui ) {
                     $('#nach').trigger('click');
                     $('#nach1').trigger('click');
                      $('#nach2').trigger('click');
                }
        }).disableSelection();
Но в таком случае происходит ерунда одним словом, т.е. насколько я понимаю, при перетаскивании одной карточки срабатывают сразу все события. Как реализовать это правильно? И можно ли вместо id в JS вызывать onclick?
Ответ: Если в JS оставить так:
Javascript
1
2
3
4
5
6
7
8
$(function() {
        $('#tasksCart_11, #tasksCart_13').sortable({
                connectWith: '#tasksCart_13',
        change: function( event, ui ) {
                     $('#nach').trigger('click');
                }
        }).disableSelection();
)};
То из первой колонки во второе и срабатывает правильно событие и меняет статус. Но как сделать, чтобы из всех во все можно было бы?