Jquery更改表格标签无法正常工作

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

尝试使用on

更改bind

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