Question

它适用于预制的div，但在新制作的div上，它不起作用。我该如何解决这个问题？

以下是更改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();
    });
};

如果你们还需要其他任何东西，请随意提问。

Answer 1

您附加mousedown侦听器的方式意味着只会侦听该点上存在的元素。使用on方法：

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

Docs

Answer 2

答案很简单：

“它适用于预制的div，但是在新制作的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() { ... });

如果您想搜索和学习，关键概念是事件冒泡和事件委派。

使用javascript更改z索引

2 个答案: