Question

如果用户鼠标越过表格单元格，则下拉框会将html替换为通过邮件调用加载的数据。如果用户鼠标移动速度不是太快，这可以正常工作，但如果它太快，则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匹配，那么该县将作为所选选项返回。

Answer 1

出现此问题是因为mouseleave处理程序仅在响应对mouseenter处理程序的异步响应时放置。

您应该寻找一种更简单的整体代码结构，不涉及分离和重新附加处理程序。

应该可以编写两个永久连接的处理程序，如下所示：

$(".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.
});

另一点：由于县列表是静态的，您可以将其作为页面原始HTML的一部分提供。然后，您只需要返回要选择的县的名称或ID，而不是重复返回整个列表。

jQuery快速鼠标移动mouseleave事件在上一个事件完成之前触发

1 个答案: