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

的HTML

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


脚本

$('#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;
}


但是,当我单击拖动栏时,什么都没有发生?我究竟做错了什么?

最佳答案

$('#dragbar').mousedown()将一个函数(您传入的匿名函数)绑定到拖动栏元素上的mousedown事件。绑定实际上发生了吗?正常的模式是

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


确保事件绑定。

您的div中是否可以单击任何内容?我想说值得一枪,在其中添加一些废话,例如<p>test</p>,以确保单击一个明显的可见元素,以确保该事件实际上未能触发,这不仅是因为您丢失了整个div。

关于jquery - jQuery没有响应,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/9623531/

10-12 12:45
查看更多