jQuery .blur() - Не скривайте активния div

Защо този код скрива div, който се използва като jQuery селектор на blur(), ако щракна вътре в него? Blur() трябва да го скрие само ако щракна извън него.

HTML тригер:

<div class="header">To-Do <a class="triggernewtodo">Add a task...</a></div>

li за показване/скриване:

<li class="addnewtodo">
<form>
    <textarea class="addtodotextarea"></textarea>
    <div class="controlarea">
    <input class="primary" name="commit" type="submit" value="Add" />
    </div>
</form>
</li>

jQuery:

// Show/Hide New Todo form
$('a.triggernewtodo').click(function() {
    $('li.addnewtodo').show()
    $('textarea.addtodotextarea').focus();
});

$('li.addnewtodo').live("blur", function() {
    $(this).hide();
})

Предполагам, че има нещо общо с .focus(), поставен в текстовото поле, защото ако извадя този .focus(), той работи правилно, докато не щракна вътре в текстовото поле, след което щракна навън (все още вътре в елемента от списъка) и скрива целия елемент от списъка. Някакви идеи? какво правя грешно


javascript html blur jquery
person Trevan Hetzel    schedule 05.12.2012    source източник
comment
Защо използвате $.live? Отхвърлено е. Освен това, моля, не публикувайте езиковия код от страна на сървъра, поставете генерирания HTML   -  person Juan Mendes    schedule 05.12.2012
comment
Когато въпросът не се отнася до вашия back-end код, винаги е по-добре да включите изобразения си html във вашия въпрос, а не кода, който го създава.   -  person James Montagne    schedule 05.12.2012
comment
Мога да предположа, че вашата текстова област е вътре в елемента li. Когато фокусирате този елемент, вашият li елемент изпълнява функцията за размазване. По този начин, скривайки го. Можете да проверите дали елементът textarea има фокус, преди да го скриете   -  person Leandro Barreto    schedule 06.12.2012
comment
Добре, съжалявам, момчета, редактирах го, за да показва генерирания html вместо кода от страна на сървъра.   -  person Trevan Hetzel    schedule 06.12.2012

Отговори (1)


arrow_upward
1
arrow_downward

Подозирам, че виждате събитие, което е „избухнало“ от този LI. По същество събитие "размазване" от INPUT, да речем, задейства всички манипулатори на "размазване" на този вход. След това той задейства всички манипулатори за "размазване" във ФОРМУЛЯРА. След това задейства манипулаторите за "размазване" на LI - скривайки го.

Събитието продължава по целия път нагоре в DOM дървото, освен ако не извикате stopPropagation, за да предотвратите това. Във вашия случай трябва да можете да използвате свойството event.target, за да видите дали събитието всъщност произхожда от LI и го крие само в тази ситуация (предупреждение: нетествано):

$('li.addnewtodo').live("blur", function(event) {
    if(event.target == this)
    {
        $(this).hide();
    }
});

Надявам се това да помогне!

PS: Вижте страницата за събитие за размазване за допълнителни предупреждения.

person Xavier Holt    schedule 05.12.2012