javascript - Jquery 更改表 th 标签无法正常工作

Question

我尝试按如下方式实现可调整大小的表格列

function mousemove(event) {
            var parent = $element.parent();
            var next = parent.next();
            var th = parent.parent();

            var oldParentWidth = $(parent).width();
            var oldNextWidth = $(next).width();
            var totalWidth = oldParentWidth + oldNextWidth;
            var newParentWidth = event.pageX -$(parent).offset().left;
            if( newParentWidth > totalWidth )
                return;
            if(  newParentWidth >= oldParentWidth ) {
               $(next).css({
                    width: (totalWidth - newParentWidth) + "px"
                });

                $(parent).css({
                     width: totalWidth - $(next).width() + "px"
                 });
            } else {
                $(parent).css({
                    width: newParentWidth + "px"
                });
                $(next).css({
                    width: (totalWidth - $(parent).width()) + "px"
                });

            }

        }

工作演示在这里:http://jsfiddle.net/4kc873ec/3/

当我尝试调整 th 的宽度时，它第一次无法正常工作。然后在它正常工作之后。之后它就可以正常工作了。我究竟做错了什么？

提前致谢。

Answer 1

尝试改变绑定(bind)方式

$('.resizeBar').on('mousedown', function(event) {
               event.preventDefault();
            $element = $(this);
            $(document).on('mousemove', mousemove);
            $(document).on('mouseup', mouseup);
        });