3

Having read this question, I found the answers outdated/depreciated and hence am asking if anyone would have any 'updated' answers to:

Does JQuery have a function call like 

$('#myNewDivId').on('create', function(){

});

for a single div, or multiple 'appends':

$('.myNewDivWithClass').on('create', function(){

});

for a dynamically created div?

  • I would rather not include plugins (esp. 'outdated' ones like .livequery() plugin)
  • 'DOMSubtreeModified' seems to be depreciated, and so would there be an alternative?
  • I would need this function to be compatible with (at least) IE 10 + 11.

What I'm looking to do is on create of this 'new element', is to have an ajax call back to my controller to 'replace' this div with a partial view? However, without a jquery method to use, it seems more difficult than expected

Community
  • 1
  • 1
jbutler483
  • 24,074
  • 9
  • 92
  • 145
  • It's duplicate of so many questions. http://stackoverflow.com/questions/9470931/is-there-any-on-dom-change-event or http://stackoverflow.com/questions/3219758/detect-changes-in-the-dom or http://stackoverflow.com/questions/2844565/is-there-a-jquery-dom-change-listener – Liglo App Dec 11 '14 at 09:32
  • @BarthZalewski: And yet those answers are outdated? [since DOMSubtreeModified seems to be depreciated?](http://stackoverflow.com/questions/6659662/why-is-the-domsubtreemodified-event-deprecated-in-dom-level-3) – jbutler483 Dec 11 '14 at 09:37
  • 1
    Just some thoughts: Our in-house solution was to send all Ajax interaction through a single plugin, which broadcasts a `namehere.load` event after all Ajax calls, *passing the element into which new content was loaded*. A single top-level handler then connects any required code/plugins based on classes within that loaded panel. It does require the single overruling replacement for ajax, but has simplified all our projects. In theory you could wrap the actual jQuery `$.ajax` function with this functionality, but I don't know enough about the jQuery source to attempt that (yet). – iCollect.it Ltd Dec 11 '14 at 09:38
  • ...so for your simpler "I want to know when DIV X was created" problem, are you in a position to simply `trigger` a custom event when the elements are inserted? – iCollect.it Ltd Dec 11 '14 at 09:45
  • have you tried http://stackoverflow.com/a/11546242/1719752?? – Milind Anantwar Dec 11 '14 at 09:47
  • @TrueBlueAussie: *possibly*, although I'm not a pro with JQuery (i'm calling a function in order to *add* this div, but whether I know *how* to 'trigger' is a different matter (if i'm being honest)) – jbutler483 Dec 11 '14 at 09:54
  • 1
    Added example of custom trigger event below. Hope it helps :) – iCollect.it Ltd Dec 11 '14 at 10:04

1 Answers1

2

There is no magic browser-solution that works for all older browsers although there are a few work-arounds using browser-specific features, but, if you are in control of the creation of the new elements, just broadcast a custom event on that new element (or its container) after adding it.

e.g.

var newDiv = $('<div>', {id: myNewDivId});
$('#somewhere').append(newDiv);
newDiv.trigger('myname.loaded');      // trigger event on new element

and in the main JS listen for the event:

$(document).on('myname.loaded', function(e){
    // e.target is the element added
    $(e.target).css('color', 'red');
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/epg09n4d/3/

It is suggested below that you wrap this additional functionality in a function, but that assumes you will always use the append to add elements. Instead you could use a jQuery extension method:

e.g. add a modified method to jQuery

jQuery.fn.modified = function () {
    this.trigger('myname.loaded');
    return this;
};

and call on the parent container (instead of the element):

$('#somewhere').append(newDiv).modified();

JSFiddle: http://jsfiddle.net/TrueBlueAussie/epg09n4d/7/

Note: Targeting the container (not the added element(s)) would seem to be more useful and matches the pattern we used for Ajax updating of panels.

iCollect.it Ltd
  • 92,391
  • 25
  • 181
  • 202
  • Much better than [original version](http://jsfiddle.net/epg09n4d/) :) And just to mention: if this logic (`append` + `trigger`) will be used in many places and for many elements, it is a good idea to move it in separate function (something like `function appendElement(jContainer, jElement) { jContainer.append(jElement); jElement.trigger('myname.loaded'); }` – Regent Dec 11 '14 at 10:11
  • TrueBlueAussie: Thank you for your explanation. I am presently *trying* to implement this, and will see if I can get it working within my project. Cheers. – jbutler483 Dec 11 '14 at 10:21
  • @jbutler483: Added a simpler update for you. Bit cleaner. "modified" seemed as good a name as any. :) – iCollect.it Ltd Dec 11 '14 at 10:23
  • 1
    @Regent: Rude to point out my early discarded experiments :) They may use multiple methods to add elements to the DOM, so have suggested a `modified()` jQuery extension method or similar to cater for this. – iCollect.it Ltd Dec 11 '14 at 10:24
  • @TrueBlueAussie if I'm correct, `.modified()` should be called for `newDiv` (something like `newDiv.appendTo('#somewhere').modified();` [Fiddle](http://jsfiddle.net/epg09n4d/8/)). But it looks better, that's for sure, even though in this situation you can call `.append()`, but not call `.modified()`. – Regent Dec 11 '14 at 10:55
  • TrueBlueAussie: Thank you for this, as I actually feel enlightened by your answer. :) – jbutler483 Dec 11 '14 at 10:56
  • 1
    @Regent: Please read note at end of answer. It is preferable in practice to notify from the container, and have the top-level code make the selections within that, but it does depend on the requirements. :) – iCollect.it Ltd Dec 11 '14 at 10:57
  • @TrueBlueAussie well, yes, it's hard to imagine situation when `#myNewDivId` will be added to different DOM elements - I just based on OP question. – Regent Dec 11 '14 at 10:59