$(document).on('click', 'body:not(.add-to)', function(e){
//$('.tooltip').hide();
console.log('clik');
});
Используя вышеизложенное, везде, где я нажимаю на pagem, console.log показывает clik
даже когда я нажимаю элемент .add-to
он срабатывает, когда это не должно.
Я что-то испортил?
<ul class="user-controls">
<li>
<a class="add-to" href="#">
<img src="/assets/img/icons/add-feed.png" class="favicon">
<span>Add</span>
</a>
<div></div>
</li>
</ul>
body:not(.add-to)
селектора body:not(.add-to)
соответствует элементу <body>
страницы, если он не раскрывает класс add-to
. Он не будет соответствовать ни одному из его потомков.
Вы можете искать:
$(document).on('click', 'body :not(.add-to)', function(e) {
console.log('click');
});
Но в этом случае предка body
не требуется, и вам нужно только написать:
$(document).on('click', ':not(.add-to)', function(e) {
console.log('click');
});
EDIT: из разметки, которую вы опубликовали, становится ясно, что щелчок на элементах <img>
или <span>
вызовет обработчик, поскольку ни один из этих элементов не выставляет сам класс add-to
.
Вы можете обойти эту проблему, применив ближайший() к e.target:
$(document).on("click", function(e) {
if (!$(e.target).closest(".add-to").length) {
console.log("click");
}
});
Обратите внимание, что передача :not(.add-to *)
на on()
будет иметь почти такой же результат, но не совсем: этот селектор не будет препятствовать выполнению вызова console.log()
, если элемент <a>
имеет текстового содержимого и нажмите на него.
Решение, основанное на closest()
, с другой стороны, предотвращает выполнение console.log()
в этих обстоятельствах.
Нет необходимости в теле
$(document).on('click', ':not(.add-to)', function(e){
//$('.tooltip').hide();
console.log('clik');
});
На данный момент вы говорите этому телу, у которого нет класса .add-to
Поскольку ваш селектор соответствует всем элементам body
которые не имеют add-to
класса.
То, что вы пытаетесь сделать, выглядит примерно так:
$(document).on('click', 'body > *:not(.add-to)', function(e){
console.log('click');
});
Добавьте пространство между телом, чтобы получить декандаменты
$(document).on('click', 'body :not(.add-to)', function(e){
//$('.tooltip').hide();
console.log('clik');
});
Вам нужно пространство между body
и :not(.add-to)
иначе вы говорите ему, чтобы исключить элементы тела с add-to
класса:
$(document).on('click', 'body :not(.add-to)', function(e){
//$('.tooltip').hide();
console.log('clik');
});
Пример - http://jsfiddle.net/UF44p/
.add-to
, но не соответствующего.add-to
себя. Можете ли вы опубликовать образец вашей разметки и / или воспроизвести проблему простым скрипом ?