jQuery .on() "append"

Question

So I know about jQuery's .on() function to give dynamically added element's event handlers.

E.g I've used it this way

$(document).on("change",Items,function(){/*Code here*/});

But is there a way to use this .on() function (or something else) to call a function once an object has been appended into the document? I ask this because I'm using a jquery plugin called Chosen which creates better select boxes, and it works by using the line

$(selector).chosen();

However that line doesn't work if it's used before an element is appended into the document, and for the sake of the cleanliness of my code it would be nice if I could call a function to run that line when the element has been appended, instead of adding that line after I've appended the element.

Edit: The problem isn't that I can't use .chosen() after I've appended the element. Because I can! I just want to be able to keep my code better organised by not having the $(selector).chosen() line hidden all the way at the bottom of my code unnoticed.

My code:

//Create the dropdown box for the items
var Items = document.createElement("select");
$(Items).attr( {"id":"Items"} );

$(document).on("change",Items,
    function(){
        updateHolder(true);
        $(InfoBox).trigger("chosen:updated");
        setTimeout(
            function(){
                $(Items).data('chosen').input_blur();
            }, 100
        );
    }
);

//Add items from ED.listOfItems to HTML Items dropdown box
for(var it in ED.listOfItems){
    var iKey = ED.listOfItems[it];
    var itemOption = document.createElement("option");
    if(!Array.isArray(iKey)){
        $(itemOption).val(iKey);
        $(itemOption).html(iKey.split("_")[0]);
    }
    else{
        $(itemOption).val(iKey[0]);
        $(itemOption).html(iKey[1]);

    }
    $(Items).append( itemOption );
}

/*******Set default to spawn*******/
/**/ ED.objectType = "Spawn";   /**/
/**/ ED.infoType = "";          /**/
/**/ $(Items).val("Spawn");     /**/
/**********************************/


$(MenuBar).append(Items);

$(Items).chosen({disable_search_threshold: 100});
$("#Items_chosen").css({"width":"100px","position":"absolute","left":"5px","top":"20px"});

As you can see, the 2nd to last line is the chosen line, but it just seems to be in an illogical place to me. I'm very OCD with my code :P

possible duplicate of [Most efficient method of detecting/monitoring DOM changes?](http://stackoverflow.com/questions/2457043/most-efficient-method-of-detecting-monitoring-dom-changes) — Bergi, Aug 15 '13 at 12:35
Can you just check to see if it exists before initiating chosen? `$(selector).length > 0` — Alexander Støver, Aug 15 '13 at 12:40
depends on how you append the element. Can you post the code on how you append your element on which you need to apply chosen? — Shaunak, Aug 15 '13 at 12:48

score 3 · Answer 1 · answered Aug 15 '13 at 12:34

3

Maybe there's a better way, but I usually add a class like "to_replace" to newly created elements, and then use:

$(".to_replace").each(function() {
    $(this).removeClass("to_replace").choosen();   
})

each time I changed anything.

answered Aug 15 '13 at 12:34

tobspr

8,200
5
33
46

That is quite useful. Not quite how I'd like to go about it but it seems I'll just have to stick with applying .chosen() in my code after I've appended it. Although this little trick may save me in the future! – Greg Hornby Aug 15 '13 at 12:45

André Dion · Answer 2 · 2013-08-15T12:47:13.410

1

~~document doesn't fire a change event.~~ (Edit OP is delegating change)

If you cannot manually bind .chosen() after you append, then you may want to look into MutationObserver, though the browser support is fairly bleeding edge.

edited Aug 15 '13 at 12:47

answered Aug 15 '13 at 12:35

André Dion

21,269
7
56
60

Yes, but the Items variable is a select element, and the jquery .on() method will bind that function to that element everytime it is changed. That's how it works. Also that MutationObserver looks interesting but would just make my code messier when this is just for purely aesthetically pleasing code :P Still useful though, thanks! – Greg Hornby Aug 15 '13 at 12:44
Yes sorry, my mistake for not noticing the event delegation, though to properly delegate it you should be using a selector string, not an element reference. – André Dion Aug 15 '13 at 12:45

score 1 · Answer 3 · answered Aug 15 '13 at 12:59

1

You can use livequery plugin https://github.com/brandonaaron/livequery, the best solution would be absolutely https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Events/Mutation_events ,but browser support is really poor.

answered Aug 15 '13 at 12:59

mitjak

54
2

score 1 · Accepted Answer · edited May 23 '17 at 12:02

I just found the answer I needed on another question, but it was never accepted. The answer is by Mario Bellart, Fire OnAppend event for jQuery element when it gets appended to the DOM

How I adapted his code

//Create the dropdown box for the items
var Items = document.createElement("select");
$(Items).attr( {"id":"Items"} );

$(document).on("append", Items,
    function(){
        $(Items).chosen({disable_search_threshold: 100});
        $("#Items_chosen").css({"width":"100px","position":"absolute","left":"5px","top":"20px"});
    }
);

$(document).on("change",Items,
    function(){
        updateHolder(true);
        $(InfoBox).trigger("chosen:updated");
        setTimeout(
            function(){
                $(Items).data('chosen').input_blur();
            }, 100
        );
    }
);

//Add items from ED.listOfItems to HTML Items dropdown box
for(var it in ED.listOfItems){
    var iKey = ED.listOfItems[it];
    var itemOption = document.createElement("option");
    if(!Array.isArray(iKey)){
        $(itemOption).val(iKey);
        $(itemOption).html(iKey.split("_")[0]);
    }
    else{
        $(itemOption).val(iKey[0]);
        $(itemOption).html(iKey[1]);

    }
    $(Items).append( itemOption );
}

/*******Set default to spawn*******/
/**/ ED.objectType = "Spawn";   /**/
/**/ ED.infoType = "";          /**/
/**/ $(Items).val("Spawn");     /**/
/**********************************/

$(MenuBar).append(Items).trigger("append");

I did not know about .trigger() and creating custom events. Maybe I should do some more reading up.

score 0 · Answer 5 · answered Mar 29 '17 at 09:54

I had the problem of add a class to an element i've created and appended, since this class have transition, css transitions doesn't work if element is not in the DOM tree, all solutions i've tried didn't work for me so i ended up with this workaround:

  elementParent.append(elementToAdd);
  setTimeout(() => {
    $(elementToAdd).addClass("show");
  }, 0);

In this way the class will be added only after the element has been added in the DOM.

jQuery .on() "append"

5 Answers5