0

正如标题所指的那样,这个函数似乎不适用于添加在 document.ready 函数之后的 DOM 元素。

我添加了一个新.window元素,但这个函数仍然只处理.window加载脚本时创建的元素。

我如何使它也对附加元素做出反应?

$(function() {
    // Change this selector to find whatever your 'boxes' are
    var windows = $("div.window");

    // Set up click handlers for each box
    windows.mousedown(function() {

        var tz = parseInt($('#toolbar').css( "z-index" ), 10 );
        $('#toolbar').css( "z-index", tz +1 )

        var el = $(this), // The box that was clicked
            max = 0;

        // Find the highest z-index
        windows.each(function() {
            // Find the current z-index value
            var z = parseInt( $( this ).css( "z-index" ), 10 );
            // Keep either the current max, or the current z-index, whichever is higher
            max = Math.max( max, z );
        });

        // Set the box that was clicked to the highest z-index plus one
        el.css("z-index", max + 1 );
        orderWindows(el);
    });
});
4

3 回答 3

4

您将需要将委托与.on()一起使用,以便能够让动态添加的元素对事件做出反应。就像是:

$("#someparentelement").on("mousedown", "div.window", function() {
    // your code here
});
于 2013-04-04T17:02:47.193 回答
1

使用 jQuery 的 on 方法:

$(function() {

    // Set up click handlers for each box
    $(document).on('mousedown', 'div.window',  (function() {

        var tz = parseInt($('#toolbar').css( "z-index" ), 10 );
        $('#toolbar').css( "z-index", tz +1 )

        var el = $(this), // The box that was clicked
            max = 0;

        // Find the highest z-index
        windows.each(function() {
            // Find the current z-index value
            var z = parseInt( $( this ).css( "z-index" ), 10 );
            // Keep either the current max, or the current z-index, whichever is higher
            max = Math.max( max, z );
        });

        // Set the box that was clicked to the highest z-index plus one
        el.css("z-index", max + 1 );
        orderWindows(el);
    });
});
于 2013-04-04T17:04:44.453 回答
0

代表团...是的...但是太多的行话...

简单地说: 您只在第一次加载 DOM 时添加了事件监听器。新元素没有附加事件监听器。


更新元素侦听器时的另一个重要想法是防止添加多个侦听器。你需要使用:

$('div.window').off('<event>').on('<event>', function(){ ... });

这将防止事件在旧元素上多次触发。

请记住 $() 返回一个 jQuery 对象列表。$('div.window') 返回它在 DOM 上找到的每个 div.window。因此它将为所有这些旧元素以及新创建的元素附加一个新的事件监听器。将它们关闭然后重新打开,可以很好地防止出现奇怪的功能。

使用 bind() unbind() 也是如此。

于 2018-09-18T21:13:46.673 回答