使用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

回答

相关问题