jQuery 类检查 mouseup

Question

我有以下代码，在检测 mousedown 和 mouseup 时有效。问题始于 mouseup，我试图检查目标元素是否具有特定的类。

if 语句中的代码永远不会执行。

$(this).find('td:first a.tabledrag-handle').mousedown(
    function(){
                        
        $(this).mouseup(
            function(){
                console.log('mouseup detected');
                                    
                $(this).parents('tr').css('background', 'red');
                                    
                if( $(this).parents('tr').hasClass('drag-previous') ){
                    console.log('Dragged');
                    $(this).parents('tr').css('background', 'blue');
                }
            }
        );
    }
);

if( $(this).parents('tr').hasClass('drag-previous') ) ... 代码永远不会执行。

有更好的技术或解决方法来解决这个问题吗？

更新

我想要实现的是检测下表中的拖放事件。我需要读取拖动生成的每行的权重，并在“自定义权重”字段中设置该数字并保存自定义权重。

这需要对每一行进行，这就是为什么我在十字准线上检测鼠标按下和鼠标向上，而不是在行上的鼠标输入或鼠标移出时检测。

Answer 1

使用 mouseenter 和 mouseleave 事件

window.jQuery('table tr').find('td:first a.tabledrag-handle').mouseenter(function () {
    window.jQuery(this).parents('tr').css('background', 'red');
});


window.jQuery('table tr').find('td:first a.tabledrag-handle').mouseleave(function () {
    if (window.jQuery(this).parents('tr').hasClass('drag-previous')) {
        console.log('Dragged');
        window.jQuery(this).parents('tr').css('background', 'blue');
    }
});

Answer 2

可以直接绑定mouseup事件。不必放在 mousedown 下

$("td:first a.tabledrag-handle").mouseup(function (e) {
            $(this).parents("tr").css('background', 'red');
            if ($(this).parents("tr").hasClass('drag-previous')) {
                console.log('Dragged');
                $(this).parents('tr').css('background', 'blue');
            }
        });

演示

如果您想检查每一行中的 td，请像这样更改选择器

$("tr td:first-child").mouseup(function (e) {
                $(this).parents("tr").css('background', 'red');
            if ($(this).parents("tr").hasClass('drag-previous')) {
                console.log('Dragged');
                $(this).parents('tr').css('background', 'blue');
            }
        });

更新了Fiddle