Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.04.2010, 00:37
Новичок на форуме
Отправить личное сообщение для somename Посмотреть профиль Найти все сообщения от somename
 
Регистрация: 20.04.2010
Сообщений: 8

Не работает стиль класса элемента, полученного аяксом.
Есть код:
function show(){
		$.ajax({
			type: "POST",
   			url: "main.php",
   			data: "messagebox=add",
			dataType: "html",
   			success: function (msg){$("#message-box").html(msg);}
		});
	}


из main.php приходит код:
<div class="box-controls">
					<div class="button-no">
						<div id="button-close" class="button-handler">Отмена</div>
					</div>
					<div class="button-yes">
						<div id="button-ok" class="button-handler" onmouseover="overHandler();" onmouseout="outHandler();" onmouseup="upHandler();" onmousedown="downHandler();" onclick="clickHandler();">Сохранить</div>
					</div>
					
				</div>


В css прописаны стили для button-yes:
Код:
.button-yes div.button-hover{border-color:#999 #888 #888; background-color:#999;}
.button-yes div.button-down{border-color:#777 #666 #777; background-color:#777;}
Но функциями стиль не применяется.
function outHandler(){$(this).attr("class", "");}
function upHandler(){$(this).attr("class", "button-down");}
function downHandler(){$(this).attr("class", "");}


Подскажите, пожалуйста, в чем может быть проблема?
Ответить с цитированием
  #2 (permalink)  
Старый 20.04.2010, 00:42
Аватар для subzey
Пионэр
Отправить личное сообщение для subzey Посмотреть профиль Найти все сообщения от subzey
 
Регистрация: 16.11.2009
Сообщений: 1,322

Используйте live()
Ответить с цитированием
  #3 (permalink)  
Старый 20.04.2010, 00:48
Новичок на форуме
Отправить личное сообщение для somename Посмотреть профиль Найти все сообщения от somename
 
Регистрация: 20.04.2010
Сообщений: 8

Огромное Вам спасибо. Выручили. Совсем не знал о существовании этой функции
Ответить с цитированием
  #4 (permalink)  
Старый 20.04.2010, 01:09
Новичок на форуме
Отправить личное сообщение для somename Посмотреть профиль Найти все сообщения от somename
 
Регистрация: 20.04.2010
Сообщений: 8

Изменил функции на
$('.button-handler').live('mouseover mouseout mousedown mouseup', function(event) {
		if (event.type == 'mouseover') { $(this).attr("class", "button-hover"); }
		if (event.type == 'mouseout') { $(this).attr("class", ""); }
		if (event.type == 'mousedown') { $(this).attr("class", "button-down"); }
		if (event.type == 'mouseup') { $(this).attr("class", ""); }
	});


К сожалению, обработчик отрабатывает только один раз. Подскажите, пожалуйста, как заставить выполняться всегда?
Ответить с цитированием
  #5 (permalink)  
Старый 20.04.2010, 01:29
Новичок на форуме
Отправить личное сообщение для somename Посмотреть профиль Найти все сообщения от somename
 
Регистрация: 20.04.2010
Сообщений: 8

Я так понял, что функция live навешивает обработчик на элемент, удалить же его можно с помощью die, но в моем случае это видимо не подходит. Мне лишь нужно по наведению на кнопку курсора выделять ее как активную, а при убирании мышкт, снимать активность. Проблема в том, что кнопка приходит через ajax.

Надеюсь на помощь специалистов jquery)
Ответить с цитированием
  #6 (permalink)  
Старый 20.04.2010, 08:32
Аватар для micscr
Профессор
Отправить личное сообщение для micscr Посмотреть профиль Найти все сообщения от micscr
 
Регистрация: 10.09.2009
Сообщений: 1,568

live - только одно событие указывать.

Что касается кода в первом сообщении просто this неверно передается.
Надо изменить по типу:
<div id="button-ok" class="button-handler"  onmouseover="overHandler(this);" ...
function overHandler(obj){$(obj).attr("class", "button-hover");}
Ответить с цитированием
  #7 (permalink)  
Старый 20.04.2010, 09:37
Аватар для subzey
Пионэр
Отправить личное сообщение для subzey Посмотреть профиль Найти все сообщения от subzey
 
Регистрация: 16.11.2009
Сообщений: 1,322

Сообщение от somename
отрабатывает только один раз
$(this).attr("class", "button-hover")

Вы заменяете значение класса, а Вам нужно дописывать, иначе live не сможет «распознать» нужный элемент. Используйте .addClass() и .removeClass().
Ответить с цитированием
  #8 (permalink)  
Старый 20.04.2010, 10:01
Новичок на форуме
Отправить личное сообщение для somename Посмотреть профиль Найти все сообщения от somename
 
Регистрация: 20.04.2010
Сообщений: 8

Благодарю. Оба совета помогли, но выбрал второй из-за легкости кода.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не работает уменьшение элемента vvsh Элементы интерфейса 1 05.08.2009 02:44