0

DIVS（動的に追加された関数を使用して）いくつかを動的に追加しようとしていCONTAINERます。これらの誰かをクリックするとDIVs、MENUこれに挿入されますDIV。で私はこれから または約5秒で削除mouseleaveする必要があります。それは動作しますが、無秩序に...だから私は必要です：MENUDIVdelaysetInterval

  1. mouseleaveこれから出てDIVすぐにマウスをこれの上に戻すと、DIV停止する必要がありdelay ますsetInterval。の削除を停止する必要がありMENUます。

  2. 関数に問題があります'handler'。DIVにいくつかを追加するときCONTAINER、初めて doubleclikこの関数を呼び出すためにを使用する必要があるためです。しかし、私は単純なクリックを使用する必要があります。

次に例を示します：http： //jsfiddle.net/ynternet/84nVQ/5/

HTML

<div id="add" style="background:yellow; width:100px;"> add new </div>
<div id="container"> </div>
<div id="menu" style="color:red;"><b> I'm here </b></div>

jQuery

function handler() {
    $(this).on({
        click: function(e) {
            clearTimeout(time);
            if ($(this).find("#menu").length) {
                return;
            }
            $('#menu').prependTo($(this));
            $("#menu").css({
                position: "absolute",
                left: "100px"
            }).show();
        }
    });
    $(this).on({
        mouseleave: function(e) {
            time = setTimeout(function() {
                $('#menu').appendTo('body').clearTimeout(time);;
            }, 5000);
        }
    });
    $(this).on({
        mouseover: function(e) {
            clearTimeout(time);
        }
    });
}

$("#add").on({
    click: function(e) {
       var timestamp = Date.now();
       var posx = Math.floor(Math.random()*400);
       var posy = Math.floor(Math.random()*400);
       $('#container').append(function() {
        return $('<div class="add_to_this" id="' + timestamp + '" style="left:'+posx+'px; top:'+posy+'px; ">Click here</div>').click(handler);
       });
    }
});

CSS

#container {
    width:500px;
    height:500px;
    background: palegoldenrod;
    position: relative;
    top:20px;
    left: 100px;
    padding: 0px;
}
.add_to_this {
    background:yellowgreen;
    position: absolute;
    display:inline-block;
    width:200px;
    height:30px;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    -o-user-select: none;
}
4

2 に答える 2

3 
function handler() {
    $(this).on({...

何$(this)ですか？

セレクターを使用または通過していません

使用する $("#container").on

于 2012-10-08T08:49:22.277 に答える
0

これが解決策です：

JsFiddle-実例：http ：//jsfiddle.net/ynternet/84nVQ/6/

jQuery

function handler1() {
    clearTimeout(time);
    if ($(this).find("#menu").length) {
        return;
    }
    $('#menu').prependTo($(this));
    $("#menu").css({
        position: "absolute",
        left: "100px"
    }).show();
}

function handler2() {
    time = setTimeout(function() {
        $('#menu').appendTo('body').clearTimeout(time);;
    }, 5000);
}

function handler3() {
    clearTimeout(time);
}


$("#add").on({
    click: function(e) {
        var timestamp = Date.now();
        var posx = Math.floor(Math.random() * 400);
        var posy = Math.floor(Math.random() * 400);
        $('#container').append(function() {
            return $('<div class="add_to_this" id="' + timestamp + '" style="left:' + posx + 'px; top:' + posy + 'px; ">Click here</div>').click(handler1).mouseleave(handler2).mouseenter(handler3);
        });
    }
});
于 2012-10-08T12:12:45.910 に答える