jQuery is not working after div reload

Question

Maybe someone can help me with the following problem. The problem is that i'm trying to add new photo album(with jQuery) and after adding- to show new album i'm reloading DIV with jQuery .load function

$($classid).load('..')

Everything is working fine, except that after reloading function like folder hovering (where bar with buttons appear - delete,etc..on hover) just don't work. It looks like after DIV reloading jquery is dissabled and it need's to be called out again to run all functions.

I'v tryed to add this code

<script>
            $.getScript("/data/sys.js" ); // item hovering functions styling etc..
            $.getScript("/data/late.js" ); //for button clicks 
</script>

at reload DIV'S Content.. Everything worked fine except that when I try to add new photo album at next album adding it multiply's added folder count.. so when i add one there show's up one, at next click there is two new folders.. I'v tryed alot and I cant figure out how to stop this or do it in diffrent way.. here is late.js file that is responsible for new folder adding.. late.js file

Thanks in advance..

score 1 · Answer 1 · answered Jan 21 '16 at 17:02

1

Does adding this code below make any difference, as the page wont load up until everything is ready.

$(document).ready(function(){

});

answered Jan 21 '16 at 17:02

Smithy

771
10
29

Bad idea. This will only work when the page is loaded, not when the div is reloaded. It will not work. – JotaBe Jan 21 '16 at 17:36

score 0 · Answer 2 · answered Jan 21 '16 at 17:11

Try:

function loadSelectors() {
   // here paste sys.js code

   $('#lfd').live('click', function(e) {//form button
     $.post( $("#frm1").attr("action"),//form
             $("#frm1 :input").serializeArray(),//form input
             function(info){
                $("#ui_info_anim_s").html(info);//popup
                $("#afolder").css("display","none");
                $("#fn_nameid").val('New Folder');
                //a lot of animation stuff for popup
                $("#ui_info_anim_s").animate({top: '40px'}, 'slow', function() {
                    $('#load_anim_privf').fadeIn( 500);
                    $('#load_anim_pubf').fadeIn( 500);
                    $('#load_anim_privf').fadeOut(1000,function(){});
                    $('#load_anim_pubf').fadeOut( 500);
                    $(this).delay(3000).animate({top: '+=40px',opacity:'0','filter':'alpha(opacity=0)'},'slow',function(){
                        $(this).css({"top": "-42px","margin-top": "-42px", "opacity": "1","filter":"alpha(opacity=0)" });


                });});

       });
       loadUp(1,'.ui_treetype','');// Reloading func

    });


    $("#frm1").submit( function() {
      return false;
    });

}

Now you need to call function loadSelectors() two times. First on document load & second where div created

Nikolay Ermakov · Answer 3 · 2016-01-21T17:24:09.580

0

This happens because when you attach event handlers to div's and then replace them you lose all event bindings.

What you need is to attach event handlers through their parent container element which stays on page regardless of reload. I think it may be the one you refer to as $classid in your code.

In this case attach event handlers this way, only once, at your page dom ready event:

$(document).ready(function(){

    $($classid).on("hover", "yourSelectorHere", function() {
       ... your code to handle event
    })

    $($classid).on("click", "yourSelectorHere", function() {
       ... your code to handle event
    })

    ...
})

edited Jan 21 '16 at 17:24

answered Jan 21 '16 at 17:18

Nikolay Ermakov

5,031
2
11
18

I think we want to make sure we have `$($classid)` element there to attach `on` to it, no? – Nikolay Ermakov Jan 21 '16 at 17:50
I'm sorry. You're fully right. I forgot that you still need a root element to attach bindings to. I'm deleting my silly comment ;) – JotaBe Jan 21 '16 at 18:04

jQuery is not working after div reload

3 Answers3