jQuery + stopPropagation: исключить дочерний элемент из родительского селектора - PullRequest
Новая
       19

jQuery + stopPropagation: исключить дочерний элемент из родительского селектора

1 голос
/ 23 января 2012

Окончательный рабочий код на основе принятого ответа 

        $('#photo-upload, #photo-upload .close').click(function(){
            $('#photo-upload').removeClass('show');
        });

        $('#upload-button').click(function(){
            $('#photo-upload').addClass('show');
        });

        $('#form-window').click(function(e){
              e.stopPropagation();
        });

оригинальный вопрос

У меня есть модальное окно с кнопкой закрытия. Окно открывается по ссылке a#upload-button. #photo-upload - это фиксированная высота 100% высота + ширина. #form-window - это окно размером 200 на 200 пикселей, центрированное по горизонтали и вертикали внутри #photo-upload

<div id="photo-upload">
    <div id="form-window">
        <!-- Content -->
        <a class="close"></a>
    </div>
</div>

Кнопка закрытия абсолютно расположена немного выше правого верхнего угла. Я хочу установить функцию щелчка, чтобы щелчок за пределами модального окна закрывал окно, а также чтобы щелчок по кнопке закрытия закрывал окно. Но так, что нажатие на само окно не закрывает окно.

Мой текущий код: 

$('#photo-upload').click(function(e){
    if(!$(e.target).is('#form-window')){
      return false;
    } else {
        $(this).removeClass('show');
    }
});

$('#form-window').live("click",function(e){
    if(!$(e.target).is('a.close')){
      e.stopPropagation();
    }
});


$('#upload-button').live("click", function(){
    $('#photo-upload').addClass('show');
});

$('#photo-upload .close').live("click", function(){
    $('#photo-upload').removeClass('show');
});

С приведенным выше кодом, ничего не происходит, когда я щелкаю по любому из этих элементов и не могу закрыть div. Что я делаю не так?

Как использовать stopPropagation () на родительском элементе, но исключить дочерний элемент (в моем случае, a.close).

Ответы [ 2 ]

4 голосов
/ 23 января 2012

Проверьте, не является ли target закрывающей ссылкой внутри обработчика form-window click. Это не останавливает event propagation, иначе обработчик документа click позаботится об отдыхе. Попробуйте это 

    $(document).live('click',function(){
        $('#form-window').removeClass('show');
    });

    $('#form-window').live("click",function(e){
        if(!$(e.target).is('a.close')){
          e.stopPropagation();
        }
    });
2 голосов
/ 23 января 2012

Просто добавьте дополнительный обработчик к кнопке закрытия, которая также закрывает окно. 

$(".close").live('click',function(){
            $('#form-window').removeClass('show');
        });

В идеале вы, вероятно, хотите добавить селектор .close в дополнение к document и иметь только функциюодин раз, чтобы избежать дублирования кода.

...