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

Question

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

 $('#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% высота + ширина фиксированного div. #form-window является 200px на 200px коробка, которая центрируется по горизонтали и по вертикали внутри #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).

Answer 1

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

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

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

Answer 2

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

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

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