2

Есть примерно такой кусок кода:

<td class="note" id="<уникальные>">
    <div class="s1">Трам-пам-пам</div><div id="form" style="display:none; opacity: 0; width:100%"><textarea></textarea><br/><input type="button" id="save" value="OK" /><input type="button" id="del" value="X" /></div>
</td>

Задача: при клике по ячейке, вместо div.s1 показать div#form. C этим проблем нет.

$("td.note").click(function(){
   $(this).find("div.smoke").animate({opacity: 0},600).css("display","none");
   $(this).find("div#notetext").css("display","block").animate({opacity: 1},600).find("textarea").focus();
});

Ячеек много, при клике на другой, надо скрывать div#form и показывать div.s1 у всех, кроме текущей. Проблем вроде тоже нет (сделал потерей фокуса):

$("textarea").blur(function(){
   $(this).parent().animate({opacity: 0},600).css("display","none");
   $(this).parent().prev().css("display","block").animate({opacity: 1},600);
})

При клике по кнопкам под textarea надо будет ajax'ом отправлять запросы. Проблема: когда делаю клик по любой из кнопок, то с textarea пропадает фокус, и соответственно div#form пропадает вместе с кнопкой и событие click не срабатывает.

Понятно в принципе что проблема в скритии дива по blur, но увы я пока не придумал как еще это можно сделать.

Потому прошу помощи!

2 ответа 2

3

Повесьте на document событие: при клике проверять кликнутый элемент. Если он пришелся не внутрь всплывающей формы и не по элементу внутри нее, то скрыть текущую форму. А обработчик блюра тогда уберите.

<table>
<tr><td class="note" id="<уникальные>">
    <div class="s1">Трам-пам-пам</div>
    <div class="floating_form" style="display:none; opacity: 0; width:100%">
        <textarea></textarea><br/>
        <input type="button" id="save" value="OK" />
        <input type="button" id="del" value="X" />
    </div>
</td></tr>
<tr><td class="note" id="<уникальные>">
    <div class="s1">Трам-пам-пам</div>
    <div class="floating_form" style="display:none; opacity: 0; width:100%">
        <textarea></textarea><br/>
        <input type="button" id="save" value="OK" />
        <input type="button" id="del" value="X" />
    </div>
</td></tr>
<tr><td class="note" id="<уникальные>">
    <div class="s1">Трам-пам-пам</div>
    <div class="floating_form" style="display:none; opacity: 0; width:100%">
        <textarea></textarea><br/>
        <input type="button" id="save" value="OK" />
        <input type="button" id="del" value="X" />
    </div>
</td></tr>
</table>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript">
$("td.note .s1").click(function(){
    var f = $('.floating_form:visible');
    f.animate({opacity: 0}, 600, function(){this.style.display = 'none';});
    f.prev().css("display", "block").animate({opacity: 1}, 600);
    $(this).animate({opacity: 0}, 600, function(){this.style.display = 'none';});
    $(this).next().css("display", "block").animate({opacity: 1}, 600).find("textarea").focus();
});
$(document).click(function(e){
    var t = $(e.target);
    if(!t.hasClass('floating_form') && !t.hasClass('s1')) t = t.closest('.floating_form');
    if(!t.length){
        var f = $('.floating_form:visible');
        f.animate({opacity: 0}, 600, function(){this.style.display = 'none';});
        f.prev().css("display", "block").animate({opacity: 1}, 600);
    }
});
</script>
3
  • А можно как-то кодом ваш ответ подкрепить? :)
    – DemoS
    25 ноя 2011 в 12:55
  • Подкрепил. =)
    – ling
    25 ноя 2011 в 13:10
  • Офигеть о_0 Благодарю, работает как часы! :) Песочные швейцарские. :)
    – DemoS
    25 ноя 2011 в 13:21
2

Можно думаю заблокировать элемент добавив дополнительный атрибут, например role-select="no". И ставить ему yes если он или его чилд получил click. В момент потери фокуса пропускать всех с атрибутом role-select="yes". Если клик пошел по другой строке снимаем всем yes на no и тому который this лепим yes.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.