Question

我正在尝试创建可调整大小的div元素，我正在使用jQuery。这是我的代码

HTML

<div class="leftBorder">
    <div id="dragbar"></div>
    <h2>Left</h2>
</div>

SCRIPT

$('#dragbar').mousedown(function(e) {
    console.log("Mouse down");
    e.preventDefault();
    $(document).mousemove(function(e) {
        $('.leftBorder').css("width", e.pageX + 2);
    });
});
$(document).mouseup(function(e) {
    $(document).unbind('mousemove');
    console.log("Mouse up");
});

CSS

.leftBorder {
    width: 300px;
    float: left;
}
#dragbar {
    background-color: black;
    height: 100%;
    float: right;
    width: 3px;
    cursor: col-resize;
}

但是当我点击我的拖杆时没有任何反应？我做错了什么？

Answer 1

$('#dragbar').mousedown()将一个函数（您传入的匿名函数）绑定到dragbar元素上的mousedown事件。这种绑定真的发生了吗？正常的模式是

$(document).ready(function() {
  $('#dragbar').mousedown();
});

确保事件受到约束。

你的div里面有什么东西可以点击吗？我会说，在<p>test</p>添加一些废话是值得的，以确保有一个明显的可见元素点击以确保事件实际上无法触发，并且它不仅仅是你'完全错过了div。

Answer 2

在我的小提琴http://jsfiddle.net/powtac/q4xmE/4/

上工作正常

jQuery没有响应

2 个答案: