Javascript 排序完成后取消绑定click事件

Javascript 排序完成后取消绑定click事件,javascript,jquery,jquery-ui-sortable,Javascript,Jquery,Jquery Ui Sortable,我有一个图像列表,由jquerysortable进行排序。我可以拖放图像进行排序。 现在,每个图像的父锚点还附加了light box事件的Click事件 因此,当用户单击图像时,它会在lightbox中打开。我也可以在其他地方拖放图像 事件冒泡: 当我尝试拖动图像时,将触发click事件。我没料到。如何在拖动图像时禁用单击事件 HTML代码: <div class="shop-photos"> <div id="shop-photos"> <ul class="ui

我有一个图像列表,由jquerysortable进行排序。我可以拖放图像进行排序。 现在,每个图像的父锚点还附加了light box事件的Click事件

因此,当用户单击图像时,它会在lightbox中打开。我也可以在其他地方拖放图像

事件冒泡: 当我尝试拖动图像时,将触发click事件。我没料到。如何在拖动图像时禁用单击事件

HTML代码:

<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);
            }   
        })
$(“#商店照片a”)。灯箱({overlayBgColor:“#111”,overlayocapacity:0.6,containerResizeSpeed:150});
$(“#商店照片ul”)。可排序({
开始:功能(事件、用户界面){
ui.item.find(“a”)。解除绑定(“单击”);
},
停止:函数(事件,ui){
$(“#店铺照片a”)。绑定(“单击”);
},
不透明度:0.6,
光标:“移动”,
更新:函数(){
变量顺序=$(this).sortable(“序列化”);
var arr_mediaid=order.split('&');
对于(var i=0;i而言,.bind()方法包含两个变量。事件“click”和一个函数。不能只说$(“#shop photos a”)。bind('click')

你需要说$(“#shop photos a”).bind('click',[some function]),即[some function]将是lightbox触发器

我建议在图像缩略图之外使用一个单独的图标进行拖动;分离您的UI-一个用于拖动,一个用于缩放

否则,在拖动完成后,将lightbox open函数重新绑定到锚点。有意义吗?

该.bind()方法包含两个变量。事件“click”和一个函数。不能只说$(“#shop photos a”)。bind('click')

你需要说$(“#shop photos a”).bind('click',[some function]),即[some function]将是lightbox触发器

我建议在图像缩略图之外使用一个单独的图标进行拖动;分离您的UI-一个用于拖动,一个用于缩放


否则,在拖动完成后,将lightbox open功能重新绑定到锚点。有意义吗?

如果您使用的是最新版本的jQuery,则意味着您必须使用
。on
。off
bind已被弃用

而不是解开束缚

ui.item.find("a").off("click");
而不是束缚

$("#shop-photos a").on("click");
或者,如果要禁用标记上的单击事件,则表示

$("#shop-photos a").click(function() { return false; }); 

如果您使用的是最新版本的jQuery,则意味着您必须使用
.on
.off
bind已被弃用

而不是解开束缚

ui.item.find("a").off("click");
而不是束缚

$("#shop-photos a").on("click");
或者,如果要禁用标记上的单击事件,则表示

$("#shop-photos a").click(function() { return false; }); 

它是在特定次数的点击后停止工作,还是随机停止工作?@MandeepJain,+1。排序后,锚定的点击事件仍然被禁用。因此,如果我单击图像/锚定,则不会显示LightBox,但图像会在浏览器中打开。(答:仅我拖动的图像。)这意味着lightbox会在内部将其功能绑定到单击事件,并且由于您解除绑定,lightbox功能也会解除绑定。在绑定clickin单击功能后,请尝试在停止功能中再次初始化lightbox。您有任何功能吗?它会在特定次数的单击后停止工作,还是随机停止工作?@MandeepJain,+1。排序后,锚定的单击事件仍然处于禁用状态。因此,如果我单击图像/锚定,则不会显示LightBox,但会在浏览器中打开图像。(回答:只有我拖动的图像。)这意味着lightbox会在内部将其函数绑定到单击事件,并且由于您解除了绑定,lightbox函数也会解除绑定。在绑定clickin单击函数后,请尝试在停止函数中再次初始化lightbox。您是否有任何功能?