当结果包含div时，jQuery / CSS / AJAX Popup-Style DIV关闭

Question

我制作了一个jQuery / CSS Popup-Style Div。 div的内容是通过ajax-request加载的，放在.ajax_popup_wrapper中！

当您将鼠标悬停在TIPP上时，会创建div并将其附加到“BODY”。 （.ajax_popup_wrapper_wrapper）

我在div函数中使用这些行：

$('.ajax_popup_wrapper_wrapper').mouseout(function(){
        // REMOVE DIV's
}); 

检查鼠标是否在.ajax_popup_wrapper_wrapper上（如果没有 - ＆gt;关闭它！）

如果ajax_popup_wrapper只包含文本和图像（或类似的东西！），这很好。如果结果包含另一个div（在图片中：RESULT DIV），则不能悬停此RESULT DIV，因为.ajax_popup_wrapper_wrapper已被删除。 RESULT DIV应该是wrapper_wrapper的基础，但必须仍然可以点击！

我试图把wrapper_wrapper放在RESULT DIV的顶部，这样可行（div不会被关闭！），但是我不能点击RESULT DIV里面的链接..

很奇怪，请帮助我！ 谢谢！

编辑：我添加了一个JSFIDDLE示例 http://jsfiddle.net/dH55F/19/

Answer 1

检测我们移动鼠标的元素是否有一个类[希望你可以在其中添加一个标识符]，如果是，则返回false，否则，只需执行正常删除代码。

$('.ajax_popup_wrapper_wrapper').mouseout(function(e){
    if($(e.toElement).hasClass('other')){
        return false;   
    }
    //do your remove code here
});

我不确定元素是否已从DOM中完全删除，因此以下代码将事件处理程序委托给任何具有other类的元素，该元素存在于DOM树中。点击;无论是在DOM准备好之后是否添加它。

$(document).on('mouseout', '.other', function(e){
    e.stopPropagation();
});

请注意我们使用.stopPropagation()，我们这样做是因为它不会随意触发.mouseout()上的.ajax_popup_wrapper_wrapper函数。

Theoretical implementation (jsFiddle)

Answer 2

像这样使用，

var mouse_is_inside = false;
$(document).ready(function()
{
    $('.ajax_popup_wrapper_wrapper').hover(function(){ 
        mouse_is_inside=true; 
    }, function(){ 
        mouse_is_inside=false; 
    });


});

参考：see this

Answer 3

问题解决了！谢谢！

我唯一需要改变的是删除mouseout（）并用mouseleave（）替换它......

$('.ajax_popup_wrapper_wrapper').mouseleave(function(){
// remove div