Vijaya Raaja Velu Vijaya Raaja Velu - 5 months ago 17
Javascript Question

Jquery Onclick functionality not working for div, as specific loaded after sometime

For

<div class="editdiv">Test</div>
. Jquery click functionality is added in document.ready function . But
editdiv
loading in page dynamically with delay.

So when I click on the
div
. Function is not calling. By using
timeout
function is working fine.

I need a different approach to solve this functionality.

Answer

If your .editdiv is loaded dynamically after your js loading so your click event can't detect it and it will not work, instead you should use event delegation on() to deal with fresh DOM :

$('body').on('click', '.editdiv', function(){
    //Your click event code
})

If you want to avoid setTimeout you could use delay with queue callback method :

$('div.scroll-area-blue')
    .delay(5000)
    .queue(function() {
        $(this).enscroll({
             showOnHover: false,
             verticalScrolling: true,
             verticalTrackClass: 'vertical-track-blue',
             verticalHandleClass: 'vertical-handle-blue'
        });
    });

If you will use setTimeout better to use it this way :

setTimeout( enscrollDiv, 5000); 

function enscrollDiv(){
    $('div.scroll-area-blue').enscroll({
         showOnHover: false,
         verticalScrolling: true,
         verticalTrackClass: 'vertical-track-blue',
         verticalHandleClass: 'vertical-handle-blue'
    });
}

Hope this helps.

Comments