defer events when table is being populated <p>I'm creating a simple dropdown plugin where the values of the dropdown were in tabular manner.</p> <p>what I want is to halt the event while my table is being loaded.</p> <p>here's my code.</p> <pre><code> //appendTableForThePanel $('#appendHere').append('&lt;table class="table table-hover table-condensed"&gt;&lt;/table&gt;'); $('#appendHere').find('table').append('&lt;thead&gt;&lt;/thead&gt;'); $('#appendHere').find('table').append('&lt;tbody&gt;&lt;/tbody&gt;'); $('#appendHere').find('table').find('thead').append('&lt;tr&gt;&lt;/tr&gt;'); for(appendCountHeader = 0; appendCountHeader &lt; tableHeader.length; appendCountHeader++ ){ $('#appendHere').find('table').find('thead').find('tr').append('&lt;th&gt;'+tableHeader[appendCountHeader]+'&lt;/th&gt;'); } //count tbody tbody_tr var tbody_tr = tbody.length / tableHeader.length; //count how many column / row var tbody_td = tbody.length / tbody_tr; //append tbody tr tdcontent for(var i = 0; i &lt; tbody.length; i += tbody_td) { $newRow = $("&lt;tr&gt;"); for(var j = 0; j &lt; tbody_td; j++) { $newRow.append( $("&lt;td&gt;").html(tbody[i + j]) ); } $("#appendHere").find('table').find('tbody').append($newRow); } $('body').on('click', '#appendHere table tbody tr', function() { // alert($(this).find('td:nth-child(1)').html() + ' : ' + $(this).find('td:nth-child(2)').html()); $($element.selector).val($(this).find('td:nth-child(2)').html()); $('#appendHere').hide(); }); // **I want to deferred below functions when the table is appending** $($element.selector).blur(function(){ setTimeout(function(){ $('#appendHere').hide(); }, 200); }); $($element.selector).on('click', function(){ $('#appendHere').show(); }); $($element.selector).keyup(function(){ }); </code></pre> <p>I know it is possible but I can't grasp the idea of deferring a function.</p> <p>thanks in advance.</p>