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
Когда вопрос не относится к вашему серверному коду, всегда лучше включить в вопрос ваш обработанный 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, скажем, запускает все обработчики «размытия» на этом входе. Затем он запускает все обработчики "размытия" в FORM. Затем он запускает обработчики «размытия» на 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