排序完成後取消綁定點擊事件

我有一個圖像列表，可以通過jQuery排序進行排序。我可以拖放圖像進行排序。現在，每個圖像的父錨還附加了燈箱事件的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); 
      } 
     })

我已經正確刪除了錨點上的點擊事件。但是，圖像拖動完成後無法恢復。

我的問題是排序幾次後，點擊事件不會出現了。解除綁定事件是否正確觸發？我有沒有把它綁在適當的地方？

來源

2013-01-25 Umesh Patil

是否停止特定工作後，點擊次數，或隨機停止工作？ –

@MandeepJain，+1。排序後，點擊錨點的事件仍然被禁用。所以，如果我點擊圖片/錨點，ightbox不會出現，但Image會在瀏覽器中打開。（答案：只有拖動過的圖像。） –

這意味着燈箱在內部將其功能綁定到點擊事件，並且由於您解除了綁定，所以燈箱函數也會被解除綁定。嘗試在停止功能中重新初始化您的燈箱後，綁定點擊功能 –

.bind（）方法需要兩個變量。事件，「點擊」和一個功能。你不能只說$（「＃shop-photos a」）。bind（'click'）;

你需要說$（「＃店鋪照片」）綁定（ '點擊'，[某些功能]）。該[某些功能]將是lightbox觸發器。

我建議使用一個單獨的圖標用於拖動，圖像的縮略圖的外部;分開你的用戶界面 - 一個用於拖動，一個用於縮放。

否則，重新綁定燈箱open函數錨拖拽完成後。合理？

來源

2013-01-25 05:53:57 BBagi

如果您使用的是最新版本的jQuery，意味着您必須使用.on和.off 綁定已棄用。

，而不是解除綁定

ui.item.find("a").off("click");

，而不是綁定

$("#shop-photos a").on("click");

，或者如果你想禁止在標籤上點擊事件意味着

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

來源

2013-01-25 06:36:22 muthu

排序完成後取消綁定點擊事件

回答

相關問題