Проблема с селектором Jquery

Question

На моей странице есть следующая html-разметка,

<div id="sig_container">
    <div id="layer1" class="layer ui-draggable ui-resizable ui-resizable-autohide">
    <div id="layer2" class="layer ui-draggable ui-resizable ui-resizable-autohide">
    <div id="layer3" class="layer ui-draggable ui-resizable selected ui-resizable-autohide">
</div>

На этой странице я пытаюсь выбрать div #sig_container без выбора дочерних элементов.Однако у меня возникла проблема с этим.Селектор либо выбирает все, либо ничего.

Заранее спасибо Даниэль

Редактировать: Извините, я должен добавить, я пытаюсь добавить событие нажатия на контейнер.Поэтому я хочу, чтобы событие происходило только тогда, когда я щелкаю контейнер, а не дочерние элементы.

Answer 1

Вы можете достичь желаемого, протестировав event.target события click.

$('#sig_container').click(function( event ) {
    if( event.target === this ) {
        // the children were not clicked, so run your code
    }
});

Причина этого в том, что события щелчка естественно всплывают, поэтому, если вы щелкнете по одному из дочерних элементов, событие всплывет до sig_container и запустит его обработчик.

С этим решением вы убедитесь, что target события было на самом деле sig_container до того, как оно запустит код.

Так в основном:

• this является sig_container

• event.target - фактический элемент, на который нажали

• , если this совпадает с event.target, запустите код

Answer 2

$('#sig_container')

должен сделать свое дело.Если это не так, передаете ли вы html через что-нибудь, что искажает идентификаторы?

Answer 3

Этот селектор выберет только <div id="sig_container">:

$('#sig_container')

Если вы думаете, что он также выбирает детей, это не так:

alert($('#sig_container').length); // alerts 1