Не работает стиль класса элемента, полученного аяксом.
Есть код:
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;} function outHandler(){$(this).attr("class", "");} function upHandler(){$(this).attr("class", "button-down");} function downHandler(){$(this).attr("class", "");} Подскажите, пожалуйста, в чем может быть проблема? |
Используйте live()
|
Огромное Вам спасибо. Выручили. Совсем не знал о существовании этой функции
|
Изменил функции на
$('.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", ""); } }); К сожалению, обработчик отрабатывает только один раз. Подскажите, пожалуйста, как заставить выполняться всегда? |
Я так понял, что функция live навешивает обработчик на элемент, удалить же его можно с помощью die, но в моем случае это видимо не подходит. Мне лишь нужно по наведению на кнопку курсора выделять ее как активную, а при убирании мышкт, снимать активность. Проблема в том, что кнопка приходит через ajax.
Надеюсь на помощь специалистов jquery) |
live - только одно событие указывать.
Что касается кода в первом сообщении просто this неверно передается. Надо изменить по типу: <div id="button-ok" class="button-handler" onmouseover="overHandler(this);" ... function overHandler(obj){$(obj).attr("class", "button-hover");} |
Цитата:
$(this).attr("class", "button-hover") Вы заменяете значение класса, а Вам нужно дописывать, иначе live не сможет «распознать» нужный элемент. Используйте .addClass() и .removeClass(). |
Благодарю. Оба совета помогли, но выбрал второй из-за легкости кода.
|
Часовой пояс GMT +3, время: 20:57. |