Jquery UI嵌套可選問題

我有要求在運行時單擊按鈕時水平和垂直創建/分割我的div元素。我可以創建一個div容器，其中根據點擊按鈕將畫布拆分。Jquery UI嵌套可選問題

例如：當我點擊horizontalSplit按鈕時，它應該在選定的容器內創建兩個新的div。我遇到嵌套的子div元素的問題。當我試圖選擇最內層的子代碼時，也是選擇父div，這也是創建問題。我無法弄清楚，爲什麼我無法選擇的類會自動獲得「用戶界面選擇」

這是我迄今所做的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
       <link rel="stylesheet" href="css/themes/base/jquery.ui.all.css"> 
       <script type="text/javascript" src="scripts/jquery-1.6.js"></script> 
       <script type="text/javascript" src="scripts/jquery-ui-1.8.13.custom.min.js" ></script>    
        <style> 

         #canvasWrapper { 
          border: 1px solid #DDDDDD; 
          height: 500px; 
          vertical-align:top; 
          margin-left: auto; 
          margin-right: auto; 
          width: 90%; 
         } 
         .Frame { 
          border: 1px solid #DDDDDD; 
          height: 500px; 
          margin-left: auto; 
          margin-right: auto; 
          width: 100%; 
         } 
         .hFrame { 
          border: 1px solid #DDDDDD; 
          height: 50%; 
          width: 100%; 
          position:relative; 
         } 

         .nonSelectable { 
          border: 1px solid #DDDDDD; 
          height: 50%; 
          width: 100%; 
          position:relative; 
         } 

         .vFrame { 
          border: 1px solid #DDDDDD; 
          height: 100%; 
          width: 50%; 
          position:relative; 
         } 

         .buttonBar { 
          position: relative; 
          margin-left: auto; 
          margin-right: auto; 
          width:90%; 
         } 
         .Frame .ui-selecting,.vFrame .ui-selecting ,.hFrame .ui-selecting { background: blue; } 
         .Frame .ui-selected,.vFrame .ui-selected ,.hFrame .ui-selected { background: grey; } 
         .hFrame ui-selectable { background: yellow; } 
         .hFrame ui-selected { background: green; } 
         .hFrame ui-selectable ui-selected { background: pink; } 

        </style> 



</head> 
<body> 
    <div id="canvasWrapper"> 
     <div id="canvasFrame" class="Frame"> 
     </div> 
    </div> 
    <div class="buttonBar"> 
     <input id="B1" class="button" type="submit" value="Horizontal Split"> 
     <input id="B2" class="button" type="submit" value="Vertical Split"> 
    </div> 

    <script> 
     $(document).ready(function() 
     { 
      $("#canvasFrame").addClass("ui-selected"); 
      $(function() { 
       $(".Frame").selectable({ 
        // cancel: '.nonSelectable' 
       }); 
       $(".hFrame").selectable({ 
        // cancel: '.nonSelectable' 

       }); 
       $(".vFrame").selectable(); 
       // $(".nonSelectable").selectable("disable"); 
      }); 

      addHFrame(); 

      addVFrame(); 



     }); 

    function addHFrame(){ 
     $("#B1").unbind('click.addit').bind('click.addit',function() 
     { 

     var numSplits=2; 
     var select=""; 

     $(".ui-selected ").each(function() { 
       for (var i=0; i<numSplits ; i++){ 
         $(this).removeClass('ui-selected ui-selectable'); 
         $(this).parent().removeClass('ui-selected ui-selectable'); 
         var $newElement = '<div></div>'; 

         $(this).append($newElement); 
         $(this).children().addClass("hFrame"); 

         //$(this).unbind('ui-selected ui-selectable'); 
         // $(this).parent().selectable("disable") ; 
         // $(this).remove("hFrame").addClass("nonSelectable") ; 
         addHFrame(); 
        } 
       $(this).hasClass("hFrame") ? $(this).removeClass("hFrame").addClass("nonSelectable") : $(this);       
      }); 
     }); 

    } 

    function addVFrame(){ 

       $("#B2").click(function() 
       { 

        $("div.ui-selected").each(function() { 
         // $(this).append('<div class="vFrame"> </div>');  
         alert("Button Vertical Split Clicked"); 
        }); 
       }); 
    } 

    </script> 
</body> 

</html>

來源

2011-06-01 user780092

聽起來像是你需要阻止事件傳播： http://api.jquery.com/event.stopPropagation/

類似的問題：jQuery UI Sortable -- How can I cancel the click event on an item that's dragged/sorted?

當點擊元素，直到達到最高水平HTML節點事件冒泡的DOM。這被稱爲事件傳播。所以事件在所有元素的祖先上被觸發，除非事件傳播被終止。這是可以做到像這樣：

HTML的

<body> 
    <div id="container"> 
     <a href="javascript:void(0);" id="click-element"></a> 
    </div> 
</body>

腳本 -

$('#click-element').click(function(event){ 

    //prevent container and body from triggering click event 
    event.stopPropagation(); 

    //do stuff 

});

來源

2011-06-01 20:57:40 kroehre

你能詳細說一下嗎....我是jquery的新手......我試過stopPropagation，它沒有奏效。 – user780092 2011-06-01 23:56:29

感謝您的回覆...stopPropagation（）正在爲我工作 – user780092 2011-06-03 05:20:19

太棒了！如果它回答了您的問題，請將此標記爲接受的答案。 – kroehre 2011-06-03 05:23:23

我試着提出的解決方案和部分它的工作原理。

但是有如何選擇項目的方式由鼠標如果容器可選或不。

如果集裝箱不可選 - 一切正常。如果容器是可選的 - 你必須點擊項目並做小拖動，只有幾個像素。

沒有指定距離，所以我的期望是它應該以同樣的方式工作。我甚至試圖調試jQuery，但沒有找到解決方案。

任何想法？

來源

2012-05-11 21:17:13

我知道這並不能爲您的問題提供技術解決方案，但它的答案比解決方案更容易。停止使用.selectable。 .selectable是提供點擊式功能的助手，在這一點上，沒有它就可以更容易地完成你想要的功能，而不是重新配置。上點擊使用帶有過濾器，並添加一些事件傳播覆蓋回去可選擇的樣式功能：

$('#canvas').on('click', '.control', function (event) { 
    var ui = $(this); 
    $('#canvas .control').removeClass('ui-selected'); 
    ui.addClass('ui-selected'); 

    -- do stuff -- 

    event.stopPropagation(); 
    event.preventDefault(); 
});

要檢測點擊關閉：

$('#canvas').on('click', function() { 
    $('#canvas .control').removeClass('ui-selected'); 

    -- Do Stuff when not selected -- 
});

因爲該事件的這不會火.stopPropagation（）選擇.control時。

來源

2015-10-30 11:31:11 Tod

Jquery UI嵌套可選問題

回答

相關問題