【发布时间】:2014-11-10 18:56:16
【问题描述】:
由于某种原因,单击文档在 Chrome 中不起作用(未调用 closeQuickView)。
元素是通过 AJAX 加载的,因此需要具有 .on() 操作(以前的 .live() 现在在 jQuery 1.7 中已弃用)
使用此处给出的示例:How do I detect a click outside an element? 作为基础
$('html').on('click', '.poster:not(.active) .image-effect', function (event) {
var obj = $(this).parent();
// If there are no .close spans
if (obj.find('.close').length === 0) {
// Add the close element by javascript to remain semantic
obj.find('.quick-view').append('<span class="close">×</span>');
}
// Close any open Quick Views
closeQuickView();
// Add the active class (controls opacity)
obj.addClass('active');
// Fade in the Quick View
obj.find('.quick-view').fadeIn(200, 'easeInOutQuint');
event.preventDefault();
event.stopPropagation();
});
$('html').on('click', '.active', function () {
return false;
});
$('html').on('click', '.close', function () {
closeQuickView();
});
$('html').on('click', '.quick-view', function (event) {
event.stopPropagation();
});
// Close the QuickView with a button
$('html').on('click', function () {
closeQuickView();
});
function closeQuickView() {
$('.poster').removeClass('active');
$('.quick-view').fadeOut(200, 'easeInOutQuint');
}
我的标记如下:
<figure class="grid_2 box poster">
<a class="image-effect" href="#">
<img class="colour" src="path/to/image" />
<img class="bw" src="path/to/image" />
</a>
<div class="quick-view">
Content
</div>
</figure>
【问题讨论】:
-
这些数字被包裹在一个#content div中,这是AJAX加载的主题。我添加了一个内部包装 div,清除了缓存,它现在似乎可以工作了:S
标签: javascript jquery html event-propagation stoppropagation