jQuery function doesn't work after appending new element

Question

As the title refers to this function doesn't seem to work with DOM elements appended after the document.ready function.

I am appending a new .window element, but this function still only handles the .window elements created when loading the script.

How do I make it react on appended elements also?

$(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);
    });
});

duplicate big time. For the answer, see [Difference between jQuery \`click\`, \`bind\`, \`live\`, \`delegate\`, \`trigger\` and \`on\` functions (with an example)?](http://stackoverflow.com/questions/2954932/difference-between-jquery-click-bind-live-delegate-trigger-and-on) — John Dvorak, Apr 04 '13 at 17:02
If I understand correctly, maybe you could use the jquery function .on() so that the mousedown event will still trigger for newly added elements. — KiiroSora09, Apr 04 '13 at 17:05
@JanDvorak I can't see how this is a duplicate of the other question.. I wasn't able to find a solution for this. Not even Stackoverflow gave me information about similar questions.. I am sorry that it bothered you that much.. — Corfitz., Apr 04 '13 at 17:13
@PhilipJensBramsted I'm not bothered. I just don't want to duplicate an answer, so I opted to look for a duplicate, and this is what I've found. Note I didn't downvote the question. — John Dvorak, Apr 04 '13 at 17:15
@JanDvorak Actually the downvote doesn't bother me at all.. I am not here for the points, but for help with my difficulties during programming.. I am only questioning the `duplicate big time` phrase which I can't seem to understand. My question was based on the function's sudden failure while the "similar" question wants to define and compare different jQuery functions.. All I actually was looking for was the `.on()`.. But I have to tell you that I learned a lot by reading the question you referred to. :) Thanks for that — Corfitz., Apr 04 '13 at 17:23

score 4 · Accepted Answer · answered Apr 04 '13 at 17:02

4

You are going to need to use delegation with .on() to be able to have dynamically added elements react to events. Something like:

$("#someparentelement").on("mousedown", "div.window", function() {
    // your code here
});

answered Apr 04 '13 at 17:02

Matt Burland

44,552
18
99
171

3

@JanDvorak: Sure, but one of the major reasons for `.on()` replacing `.live()` is so you *don't* have to do that. – Matt Burland Apr 04 '13 at 17:06
The major reason is that `live` performs selection and discards the results. – John Dvorak Apr 04 '13 at 17:07

score 1 · Answer 2 · answered Apr 04 '13 at 17:04

Use jQuery's on method:

$(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);
    });
});

score 0 · Answer 3 · answered Sep 18 '18 at 21:13

Delegation... yes... but too much lingo...

Simply put: You only added eventlisteners when you first load the DOM. The new elements do not have eventlisteners attached.

Another important idea when updating element listeneres is to prevent adding multiple listeners. You need to use:

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

This will prevent the event from appearing to fire multiple times on older elements.

Remember that $() returns a list of jQuery Objects. $('div.window') is returning every div.window it finds on the DOM. So it will attach a new eventlistener to all of those old elements as well as the newly created ones. Turning them off and then back on, well prevent weird functionality.

Same goes with using bind() unbind().

jQuery function doesn't work after appending new element

3 Answers3