排序完成后取消绑定 click 事件
Unbind the click event after sorting is done
我有一个图像列表,这些图像可以通过jquery排序。我可以拖放图像以进行排序。现在,每个图像的父锚点还附加了灯箱事件的单击事件。
因此,当用户单击图像时,它会在灯箱中打开。我也可以在其他地方拖放图像。
事件冒泡:当我尝试拖动图像时,单击事件被触发。我没想到。拖动图像时如何禁用单击事件?
网页代码:
<div class="shop-photos">
<div id="shop-photos">
<ul class="ui-sortable">
<li class="photo-frame media-placeholder media-9108" id="mediaid-9108">
<a class="preload" data-media-id="9108" href="http://usauto.vo.llnwd.net/o37/dev/07/95/0795f614c4e4d7704e54cc6e48d7ce2c0c16c91b13566015990874.jpg"><img id="9108" data-media-id="9108" src="/shop_portal/api_get_uploaded_photo/?mediaid=9108"></a>
</li>
<li class="photo-frame media-placeholder media-9082" id="mediaid-9082">
<a class="preload" data-media-id="9082" href="http://usauto.vo.llnwd.net/o37/dev/4d/f5/4df5db9819ff891deb60e9c5d85315ccbed41d9413565853192746.jpg"><img id="9082" data-media-id="9082" src="/shop_portal/api_get_uploaded_photo/?mediaid=9082"></a>
</li>
<li class="photo-frame media-placeholder media-9089" id="mediaid-9089">
<a class="preload" data-media-id="9089" href="http://usauto.vo.llnwd.net/o37/dev/9b/24/9b248b3c1308cf3f57f4220ec2aea2c0e954592113565988843784.jpg"><img id="9089" data-media-id="9089" src="/shop_portal/api_get_uploaded_photo/?mediaid=9089"></a>
</li>
<li class="photo-frame media-placeholder media-9391" id="mediaid-9391">
<a class="preload" data-media-id="9391" href="http://usauto.vo.llnwd.net/o37/dev/69/ed/69ed3eac6bfd4af09256e54ed3e5d2d4d4f9948a13572811600895.jpg"><img id="9391" data-media-id="9391" src="/shop_portal/api_get_uploaded_photo/?mediaid=9391"></a>
</li>
</ul>
</div>
</div>
我用下面的代码做到了这一点。
$('#shop-photos a').lightBox({overlayBgColor: '#111', overlayOpacity: 0.6, containerResizeSpeed: 150});
$("#shop-photos ul").sortable({
start: function(event, ui) {
ui.item.find("a").unbind("click");
},
stop: function(event, ui) {
$("#shop-photos a").bind("click");
},
opacity: 0.6,
cursor: 'move',
update: function() {
var order = $(this).sortable("serialize");
var arr_mediaid = order.split('&');
for(var i=0;i<arr_mediaid.length;i++){
arr_mediaid[i] = arr_mediaid[i].replace("mediaid[]=", "");
}
$("input[id=sorted-photos]").val(arr_mediaid);
}
})
我已经正确删除了锚点上的单击事件。 但是,图像拖动完成后无法恢复。
我的问题是排序几次后,点击事件没有出现。取消绑定事件是否正确触发?我是否在适当的位置解开了绑定?
如果你使用的是最新版本的jQuery,这意味着你必须使用.on
和.off
绑定已弃用。
而不是取消绑定
ui.item.find("a").off("click");
而不是绑定
$("#shop-photos a").on("click");
或者,如果您想禁用标签上的点击事件,则意味着
$("#shop-photos a").click(function() { return false; });
.bind()方法需要两个变量。 事件,"单击"和一个函数。 你不能只说$("#shop-photos a").bind('click');
你需要说$("#shop-photos a").bind('click',[某些功能]); 该[某些功能]将是灯箱触发器。
我建议在图像缩略图之外使用一个单独的图标进行拖动;分开你的用户界面 - 一个用于拖动,一个用于缩放。
否则,在拖动完成后将灯箱打开功能重新绑定到锚点。 有意义?
相关文章:
- 将click事件绑定到AngularJS指令中的子元素
- jQuery:click() 执行而不是绑定
- 在Angular中绑定剑道网格按钮's ng click
- 根据文件类型取消绑定和重新绑定click事件处理程序
- 创建一个模态指令,并将click事件绑定到angular js中
- 在Ajax加载的Material上绑定Click事件
- AngularJS:如何将ng-click绑定到使用嵌入或对象元素插入的SVG图像
- 如何在 Javascript 中处理同一 dom 上的 click 和 dblclick 事件绑定
- ng-click在使用ng-bind-html-unsafe绑定的模板时不起作用
- 在AJAX中使用一次后重新绑定Click事件
- 在iframe上绑定click事件
- 带有绑定click事件的Javascript循环总是返回最后的结果
- 绑定.click和.blur事件处理程序
- 不能绑定click事件在selectable上
- Jquery在for循环中绑定click事件
- 数据绑定=“click"不能使用嵌套的淘汰视图模型
- 你能绑定.click()使它在onclick之前触发吗?
- 即使在 jquery 绑定('click')之后,使悬停也能正常工作
- 排序完成后取消绑定 click 事件
- 用jQuery绑定' click '事件:获取浏览器事件,而不是jQuery事件