Calling multiple functions with jQuery on.('click'...)

Question

I have two divs side by side. The left (methods) div contains links which, when clicked, load some text into the right (descriptions) div from an external html file using '.load'. I also have some script to match the height of the 'methods' div to the 'descriptions' div, which I have placed into a function.

My problem is that I can't get the height-matching function to run on the same click as the text-loading script. At the moment, clicking a link loads the text as I want, but the height-matching doesn't happen until a link is clicked again.

I am new to javascript/jQuery so open to any and all resolutions including total rewrites of the code if that's what it takes.

Code can be seen "functioning" here: http://plnkr.co/edit/1CW1a7XNu73Kyo4xPMyg?p=preview

$(document).ready(function() {
    
    function matchDesc() {
        var hh = document.getElementById("descriptions").offsetHeight;         
        document.getElementById("methods").style.height = hh + "px";
    }

     $("#content").on('click', '#link', function(){
        var str = $(this).attr('class');
        var sect = str.slice(-1);
        $("#descriptions").load("descriptions.html #description-" + sect);
        $("#methods li a").css('color','#3164BE');
        $(this).css('color','red');

        matchDesc();
    });                     
                      
    window.onload = function() {
    matchDesc();
        }
});

You need to call the function in the complete callback of load()... $("#descriptions").load("descriptions.html #description-" + sect, function() { matchDesc(); }); .. it is because the load method is asyncronous and the actual content is loaded after the call to matchDesc — Arun P Johny
– Arun P Johny, Commented Dec 18, 2015 at 3:19
Thanks for the help guys, that was driving me nuts! I 'accepted' zer00ne's answer because the changes to the matchDesc() code made it a bit lighter, but really they both answered my actual question equally well. — GPayne
– GPayne, Commented Dec 18, 2015 at 13:48

Abhijit Annaldas · Accepted Answer · 2015-12-18 03:24:06Z

1

Fixed code here: http://plnkr.co/edit/lcAmQ9wcIGLJ9JjDi3HD?p=preview

$(document).ready(function() {

  function matchDesc() {
    var hh = document.getElementById("descriptions").offsetHeight;
    document.getElementById("methods").style.height = hh + "px";
  }

  $("#content").on('click', '.link', function() {
    var str = $(this).attr('id');
    var sect = str.slice(-1);
    $("#descriptions").load("descriptions.html #description-" + sect,
      function() {
        $("#methods li a").css('color', '#3164BE');
        $(this).css('color', 'red');
        matchDesc();
      });

  });

  window.onload = function() {
    matchDesc();
  }
});

As arun said, you need to call to do matchDesc after the load event is complete

answered Dec 18, 2015 at 3:24

Abhijit Annaldas

6674 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

zer00ne · Accepted Answer · 2015-12-18 03:45:58Z

See this fork: http://plnkr.co/edit/x4Ge7Xy3DRuQWlM9McxD?p=preview

Followed Arun's advice and changed matchDesc(); When using window.onload don't use matchDesc(); that makes the function call as soon as it's read. Using window.onload = matchDesc will allow it to load after everything else has loaded.

$(document).ready(function() {

    function matchDesc() {
        var hh = $('#descriptions').outerHeight()        
        return $('#methods').outerHeight(hh);
    }

     $("#content").on('click', '.link', function(){
        var str = $(this).attr('id');
        var sect = str.slice(-1);

        $("#descriptions").load("descriptions.html #description-" + sect, function() { 
            $("#methods li a").css('color','#3164BE');
            $(this).css('color','red');
            matchDesc();
        });
    });                     

    window.onload = matchDesc;

});

Collectives™ on Stack Overflow

Calling multiple functions with jQuery on.('click'...)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related