0

I want to do a function like Draggable from interact.js. This function adds events to multiple elements, depending of the class name, ID or tag name I choose. When a new element is added on body, it gets an event from this function from interact.js (that maybe like click,mousedown,mousemove,mouseup). I don't know if my way is good to do:

  • add a onchange event to the body to check if a element was added (by the innerHTML)

Is there a better way to do this?

takendarkk
  • 3,347
  • 8
  • 25
  • 37
  • 1
    Show us what you have. We will help you from there – Tree Nguyen Nov 11 '15 at 12:49
  • 1
    If you are creating dynamic elements, give that element a unique `id` and simply use `if(document.getElementById('ElementID'))` after appending to the page to check that element exists. It's hard to give a solid answer/solution without seeing the relevant source code and understand which part you're having problems with. – NewToJS Nov 11 '15 at 12:51
  • @NewToJS Your way sounds to be clean, but I have to make this be more faster, without performance problems. If I check if the element exists everytime, it probably will l-a-g? My code isn't ready yet, and it's very simple, for the reason I don't post it. –  Nov 11 '15 at 12:56
  • @Errorever if you want to know the element exists you will have to check it no matter what. You can't find out if an element has been created without checking that it exists so some form of check will be needed. that simple if condition will work just fine. – NewToJS Nov 11 '15 at 13:01
  • MutationObserver is probably what you'll want, assuming you don't have to support an older browser. If you post your code so far we can show you how to take advantage of it. https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver – Thriggle Nov 11 '15 at 13:04
  • @NewToJS But so it will be everytime returning a longer div, imagine in each every 120 ms when the body was changed? Remind, it's very bad to use `document.getElementById...` everytime also, so you will want to make it be into some new variable, that easilize the element access, then the document will get a bad performance because of the rest of variables, a solution maybe is to put them into an array. –  Nov 11 '15 at 13:11
  • @Thriggle My code is very simple, man. Thanks for this link. –  Nov 11 '15 at 13:12
  • I didn't say use it on the change event if the body. I said use it after appending the element to confirm that element has been created 'exists' – NewToJS Nov 11 '15 at 13:31

1 Answers1

1

Maybe this should help Most efficient method of detecting/monitoring DOM changes?

But everyone here appreciates a code snippet to see where you're stuck. please post it

Community
  • 1
  • 1
CKmum
  • 641
  • 6
  • 17
  • This is completaly about jQuery? Well, I'm not using jQuery. I'm seeing something that was linked there (https://github.com/adampietrasiak/jquery.initialize/blob/master/jquery.initialize.js). Anyway I think I'll remove `interact.js` from my document, so if I put jQuery it will be the same, without performance problems. Well, thanks for the question link, so because I can't find anything out. –  Nov 11 '15 at 13:04
  • Agreed but pure javascript wiring is hard to come by since the cumbersome code to handle browser quirks exist. That is precisely people prefer jquery so that they can focus on logic instead of core event handling stuff – CKmum Nov 11 '15 at 13:07