jquerys 'e.stopPropagation() не может получить требуемую функциональность

Question

photoContainer ниже имеет детей. Это работает нормально, но если я нажму на кого-нибудь из его детей, код выполнит, скрывает blackLayer и удаляет photoContainer. Как я могу предотвратить это и все же выполнить, когда я нажимаю где-нибудь, но на photoContainer детей?

Спасибо.

$('div#photoContainer').live('click', function (e) { 
    e.stopPropagation(); 
    var blackLayer = $('div#blackLayer'); 
    if (blackLayer.length) { 
     blackLayer.fadeOut(); 
    } 
    $(this).remove(); 
}); 

Answer 1

Я считаю, что проблема заключается в том, что вы остановить распространение события на родительский элемент, вы хотите, чтобы остановить распространение события на детей #photoContainer элемента, так что не распространяется вплоть до #phoeoContainer элемента:

$('#photoContainer').live('click', function (e) { 
    var blackLayer = $('div#blackLayer'); 
    if (blackLayer.length) { 
     blackLayer.fadeOut(); 
    } 
    $(this).remove(); 
}); 
$('#photoContainer > div').live('click', function (event) { 
    event.stopPropagation(); 
}); 

Это остановит распространение события щелчка, когда он запускается на ребенке div от #photoContainer элемента.

Вот демо: http://jsfiddle.net/J9dBS/2/ (обратите внимание, что, если нажать на элемент «ребенок», что оповещение не показан)

Я хотел бы отметить, что .live() является deprecidated от JQuery 1.7. Если вы используете JQuery 1.7 или более поздней версии, то это предложил использовать .on() так:

$(<root-element>).on(<event>, <selector>, <event-handler>) 

Или, если вы используете JQuery 1.4.2 в JQuery 1.6.4 то это предложил использовать .delegate():

$(<root-element>).delegate(<selector>, <event>, <event-handler>);