使用javascript更改zIndex

-1

它適用於預製div，但在新制作的div上不起作用。我如何解決這個問題？使用javascript更改zIndex

這裏有一個關於該事件的代碼改變用zIndex：

$(".widget").mousedown(function (event) { 
    var ws = document.getElementById("widget-workspace"); 
    var list = ws.children, x=0; 

    for(x=0;x<ws.children.length;x++){ 
     console.log(ws.children[x].id); 
     $("#"+ws.children[x].id).css("zIndex", 99); 
    } 

    $(this).css("zIndex", 100); 
});

現在，這裏的代碼添加DIV：

document.getElementById("widget-dialog-button").onclick = function() { 
    var ws = document.getElementById("widget-workspace"); 
    var list = ws.children; 
    var x, w = document.getElementById("select-widget"); 
    var widget = w.options[w.selectedIndex].value; 
    var c = document.getElementById("select-widget-color"); 
    var color = c.options[c.selectedIndex].value; 
    var left = 0, top = 25, docWidth = ws.offsetWidth, check; 

    for(x=0; x < list.length; x++){ 
     docWidth -= 325; 
     left += 325; 
     if(docWidth < 325){ 
      check = false; 
      docWidth = ws.offsetWidth; 
      left = 0; 
      top += 210; 
     }else{ 
      check = true; 
     } 
    } 

    x-=2; 

    var iDiv = document.createElement('div'); 
    iDiv.id = 'widget_'+x; 
    iDiv.className = 'widget'; 
    iDiv.style.backgroundColor = color; 
    iDiv.style.left = left; 
    iDiv.style.top = top; 
    ws.appendChild(iDiv); 

    $(function() { 
     $(".widget").draggable(); 
    }); 
};

如果你們有什麼需要，隨時問。

來源

2014-12-08 I' m not a snake

什麼可行，哪些不行？你的代碼有什麼問題？你想達到什麼目的？ – orange 2014-12-08 02:27:43

使用Jquery'On'函數... – vijaykumar 2014-12-08 02:28:52

的答案很簡單：

「它的工作原理上的預製div的，但是，新做的一個，它不工作，我如何解決這個問題？「

這是正常的：

$(".widget").mousedown(...); 

// should be read as (except that a new var is not created) 
var $currentlyExistingWidgets = $(".widget"); 
$currentlyExistingWidgets.mousedown(...);

類部件的每個元素當前存在的，你綁定的事件。

如果要將事件綁定到不存在的元素...您必須重新思考您的思維方式，然後使用事件委託機制和適當的過濾將事件偵聽器綁定到始終存在的容器。

例如下面的代碼應該抓住事件的所有.widget，之前或之後創建的：

// http://api.jquery.com/on/ 
$('body').on('mousedown', '.widget', function() { ... });

如果你要搜索和學習的關鍵概念是事件冒泡和事件代表團。

來源

2014-12-08 02:39:23 dotpush

您附加mousedown偵聽器的方式意味着只有在該點存在的元素纔會被偵聽。使用on方法：

// May want to use something other than body 
$('body').on('mousedown', '.widget', function() { 
    console.log('go'); 
});

Docs

來源

2014-12-08 02:29:18

使用javascript更改zIndex

回答

相關問題