1

Does this structure cause memory leaks and how to resolve (strategy suggestion)?. We have a page containing many dynamically generated elements (tables, buttons, textfield, checbboxes, comboboxes etc) depending on business rules and user actions. We do not have any static page. Every element is generated from a java servlet with ajax-responses using json.

We have a main container div which contains all controls. Sometimes we nee need to remove all contained elements and put new ones and sometimes only update some properties such as value for example.

<div id="bigContainer"></div>

When generating an element, we generate its html and store it in the bigContainer using jquery. For example, suppose we have a button and a textfield on first step. 

var jsButton = '<div id="button1wrapper"><input id="button1" type="button" onclick="buttonAction(this)" style=".."></input></div>';

var jsTextfield = '<div id="text1wrapper"><input id="text1" type="text" onfocus="focusAction(this)" style=".."></input></div>';

And our current page needs only this two elements:

var currentPage = jsButton + jsTextField;

And use jquery to set the elements.

$('#bigContainer').html(currentPage);

After some user interactions, we do not need these elements anymore and a generate for example a checkbox. 

var jsCheckbox = '<div id="check1wrapper"><input id="check1" type="checkbox" onclick="checkAction(this)" style=".."></input></div>';

And I only need this checbox currently, so i set it to the page:

$('#bigContainer').html(jsCheckbox);

As you see, I did not make any cleanup (i did not removed any element). Is there any bad-practise? Memory leaks? Event handlers? Zombie dom-objects?

And what happens on the second scenario, I generate a table but register its listener with jquery bind method:

var jsTable = '<div id="table1wrapper"><table id=table1><tr><td>colval1</td><td>colval2..</table>';

jsTable += '<script>registerTableCellListeners("table1")</script>';

$('#bigContainer').html(jsTable);

As you see, the table js contains a function call, registerTableCellListeners which is invoked, once the table has been generated and put into the DOM.

When the table has been created and this function is called, it registers cell events:

function registerTableCellListeners(id) {
  $('#id').find('td').bind('click', function() { 
       // handle cell event

And for example after some useraction we do not need the table anymore, generate a button and set to container and it continues like this.

$('#bigContainer').html(jsButtonNew);

Question is, do we need to call jquery method remove() on elements when we do not need them anymore, or remove event listeners especially for the table? Is any possiblity of memory leak of this mechanism? And about performance?

benchpresser
  • 2,171
  • 2
  • 23
  • 41
  • 1
    Check this for the events handlers : http://stackoverflow.com/a/4338065/1873002 – Shhade Slman Nov 28 '15 at 20:15
  • Thanks, it was helpful.I knew before, that query.html makes more than setting the innerHTML, it handles handlers for example. I will deeply check whether empty() usage will be needed.What about the tables? I have to register mouseup, down, move and doubleclick events for all cells and tables have more than hundred cells.Which is better, – benchpresser Nov 29 '15 at 00:41
  • 1
    Because you are "Generating elements dynamically" you need to add events like this, $(".parent").on("eventName",".className",callback); check this answer:http://stackoverflow.com/a/10082090/1873002 – Shhade Slman Nov 29 '15 at 07:15
  • I did not understand, why it is bad practise with – benchpresser Nov 29 '15 at 13:41
  • http://jsfiddle.net/AJRw3/ makes it clear, when binding with on, we only call it at first, but the newly created elements are also bound automatically with the event. In my app, i do not have to call registerTableCellListeners always, it will be enough to use on and only once. Correct? And should I use off() for deallocate when application is finished(unloaded)? – benchpresser Nov 29 '15 at 13:50
  • 1
    You need the (parent) element to be exists on the page on page load, you add the event handler once on the page load. You can use the off function in case you want to turn off specific event handler, but in your case you don't need it. – Shhade Slman Nov 29 '15 at 19:12

0 Answers0