Не могу убрать div, jQuery?

Question

[The Whiz]

jsfiddle.net/NgbNn/1/



Прошу помощи — по хитроумному замыслу при клике на ссылку должен темнеть фон за счет создания DIV, при клике на фон, этот див должен исчезать. Появляется он нормально, а вот с исчезновением я уже запарился.



Спасибо!

Answer 1

[Anton Bobylev]

jsfiddle.net/NgbNn/7/

$(document).on('click', '#mask', function() { ... });

stackoverflow.com/questions/9215237/live-vs-on-method

Answer 2

[CeZZ]

jsfiddle.net/NgbNn/6/

Comments

[The Whiz]

А можно ли добавить еще к этому коду keyup для ESC?

[CeZZ]

jsfiddle.net/dG8F7/
Как-то так

[The Whiz]

Я бы хотел, чтобы данная функция была доступна только при отображенной маске, а при таком раскладе каждое нажатие эскейпа обращается к DOM

[CeZZ]

jsfiddle.net/dG8F7/1/

[The Whiz]

спасибо! и за one() отдельное!

Answer 3

[Никита Гусаков]

(function() {
	$('a.log-in-link').on('click', function() {
		$('body').append('<div id="mask"></div>');
		$('#mask').fadeIn(300).on('click', function() {
		    $(this).fadeOut(300, function() {
                $(this).remove();  
            }); 
            return false;
        });
		return false;
	});
})();

Подскажите, а чем плох такой вариант?

Comments

[The Whiz]

Возможно лапшой?

[Никита Гусаков]

Я наверно дико ошибаюсь, но весь jquery — лапша, и в этом ее плюс. Вы же вот как раз пишете лапшу

.append('<div id="mask"></div>');

[The Whiz]

Да, и я этим не горжусь! :)

[Никита Гусаков]

Мне кажется все же лучше — так:

(function() {
    var $mask = $('#mask');
    $('a.log-in-link').on('click', function() {
        if($mask.length==0){
            $mask = $('<div/>', {id: 'mask'}).appendTo('body');
            $mask.on('click', function() {
                $(this).fadeOut(300);
            });
        }
        $mask.fadeIn(300);
        return false;
    });
})();

Answer 4

[Assorium]

jsfiddle.net/NgbNn/5/

Замените on на live. On отрабатывает только существующие блоки.

Comments

[The Whiz]

Я что-то путаю или в документации jQuery есть рекомендация не использовать live?

[Олег Яковенко]

$('#mask').live('click', function() будет работать, и да не рекомендуют использовать.
Причина почему не работает:
Вы каждый раз создаёте маску. $.click вешается только на существующий объект, а по скольку маска создаётся позже чем вы добавляете элемент, то коллбек не вешается.
Перепелить надо так.

$('body').append('<div id="mask"></div>');
на 
var mask = $('<div id="mask"></div>');
$('body').append(mask);
mask.on('click', ...и погнали

[Assorium]

Вы ничего не путаете. Я не предложил лучший путь, лишь предложил решение.
Можете в своем блоке div навесить onclick=«do()».
Можете изначально держать блок на странице и не удалять его, а просто прятать show(), hide().
Решений множество.

[Олег Яковенко]

Ну я просто написал автору где у него непонимание работы хэндлеров поведения, и написал пример как это быстро подправить.