我正在尝试创建可调整大小的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/