0

ユーザーのマウスがテーブル セルの上に移動すると、ドロップダウン ボックスが html を post 呼び出しによってロードされたデータに置き換えます。これは、ユーザーのマウスの動きが速すぎない場合は正常に機能しますが、速すぎる場合は html が更新されないため、ユーザーがマウスを html 内に戻すと正しくなくなります。

$(".edit_dropdown").bind('mouseenter', function () {
$(this).unbind('mouseenter');
var a = $.trim($(this).html());
var id = $(this).attr('id');

$(this).html("<span id='s-" + id + "'></span>");
$.post('save/dropdown.php', {
    id: id,
    a: a
}, function (data) {
    $("#s-" + id).html(data);

    $(".edit_dropdown").bind('mouseleave', function () {
        var id = $(this).attr('id');
        var a = $("#e-" + id).val();
        var dir = $(this).attr('class');
        $(this).html(a);
        $(this).bind('mouseenter', function () {
            $(this).unbind('mouseenter');
            var a = $.trim($(this).html());
            var id = $(this).attr('id');
            $(this).html("<span id='s-" + id + "'></span>");
            $.post('save/dropdown.php', {
                id: id,
                a: a
            }, function (data) {
                $("#s-" + id).html(data);
            });
        });

    });
});
});

html

<tr>
<td>customer county</td>
<td class="edit_dropdown" id="customer-cust_s_county"><?php echo $row['cust_s_county']; ?></td>
</tr>

$.post ファイルは英国の郡のリストを返します。郡名が html と一致する場合、その郡が選択されたオプションとして返されます。

4

1 に答える 1

0

この問題は、mouseenter ハンドラーへの非同期応答に応答して、mouseleave ハンドラーが配置されるだけであるために発生します。

ハンドラーのデタッチと再アタッチを伴わない、より単純な全体的なコード構造を探す必要があります。

次のように、永続的にアタッチされたままの 2 つのハンドラを作成できるはずです。

$(".edit_dropdown").on('mouseenter', function () {
    //Perform all mouseenter actions here.
    //If necessary, test for different states and branch as required.
}).on('mouseleave', function () {
    //Perform all mouseleave actions here.
    //If necessary, test for different states and branch as required.
});

もう 1 つのポイント: 郡のリストは静的であるため、ページの元の HTML の一部として一度だけ提供できます。次に、リスト全体を繰り返し返すのではなく、選択する郡の名前または ID のみを返す必要があります。

于 2012-12-15T15:53:38.123 に答える