排序樹內的可點擊圖標

我一直在爲我們的客戶處理可排序的樹列表來組織他們的網站。您可以添加和拖動頁面。每個li包含頁面的名稱和3個圖標（鎖定，可見和編輯）排序樹內的可點擊圖標

我無法弄清楚的是讓這些圖標可點擊。當你點擊一個圖標時，你只需要開始拖動那個li。

對於我使用dbushell的嵌套可嵌套列表：https://github.com/dbushell/Nestable

這是我的嵌套列表的例子：

<div class="dd"> 
    <ol class="dd-list"> 
     <li class="dd-item" data-id="1"> 
       <div class="dd-handle">Item 1<img class="icon" src="iconpath" style="float:right;"></div> 
     </li> 
     <li class="dd-item" data-id="2"> 
      <div class="dd-handle">Item 2<img class="icon" src="iconpath" style="float:right;"></div> 
     </li> 
     <li class="dd-item" data-id="3"> 
      <div class="dd-handle">Item 3<img class="icon" src="iconpath" style="float:right;"></div> 
      <ol class="dd-list"> 
       <li class="dd-item" data-id="4"> 
        <div class="dd-handle">Item 4<img class="icon" src="iconpath" style="float:right;"></div> 
       </li> 
       <li class="dd-item" data-id="5"> 
        <div class="dd-handle">Item 5<img class="icon" src="iconpath" style="float:right;"></div> 
       </li> 
      </ol> 
     </li> 
    </ol> 
</div>

像dbushell的我用$('.dd').nestable();使這個樹排序嵌套指南描述/可嵌套。

這是點擊功能我不能讓工作：

$(".icon").click(function() { 
console.log("click"); 
    });

我希望我提供足夠的信息，如果沒有讓我知道。此外，我只是一個初學者在編程和新的stackoverflow。如果還有什麼我做錯了，我想知道。

來源

2014-09-30 chiel arts

你有沒有試着用stopPropagation ...嘗試：

$(".lock").click(function(e) { 
    e.stopPropagation(); 
    console.log("click"); 
});

入住這Demo Fiddle ...檢查會發生什麼，如果你刪除stopPropagation

來源

2014-09-30 13:12:07 DaniP

我發現devtools令人費解的鍍鉻繞在那之後我必須把圖標放在手柄外面。

<div class="dd"> 
    <ol class="dd-list">      put the icon here 
     <li class="dd-item" data-id="1"> <---- 
       <div class="dd-handle">Item 1<img class="icon" src="iconpath" style="float:right;"></div> 
     </li> 
     <li class="dd-item" data-id="2"> 
      <div class="dd-handle">Item 2<img class="icon" src="iconpath" style="float:right;"></div> 
     </li> 
     <li class="dd-item" data-id="3"> 
      <div class="dd-handle">Item 3<img class="icon" src="iconpath" style="float:right;"></div> 
      <ol class="dd-list"> 
       <li class="dd-item" data-id="4"> 
        <div class="dd-handle">Item 4<img class="icon" src="iconpath" style="float:right;"></div> 
       </li> 
       <li class="dd-item" data-id="5"> 
        <div class="dd-handle">Item 5<img class="icon" src="iconpath" style="float:right;"></div> 
       </li> 
      </ol> 
     </li> 
    </ol> 
</div>

我也必須使用Danko的答案。

來源

2014-10-01 10:12:52

排序樹內的可點擊圖標

回答

相關問題