jquery.each not working after jquery.load

Question

I use jQuery.load to load the HTML template. After this I'm trying to get HTML content from each loaded HTML element. The HTML is loading but I can't get the HTML content.

Here is the code:

var _InterfaceBuilder = function() {
  var k45 = new _K45Kit;
  var _this = this;

  this.build = function(element) {
    var error = false;
    switch(element) {
      case 'loginPanel':
        $('#content').load('template/loginPanel.html', _this.localize(element));
        break;
        //sth else
    }   
    // sth else
  };

  this.localize = function(section) {           
    $(".loginPanel.localString").each(function(index) {
      console.log($(this).html());
    });

    //sth else
  });

When I put

$(".loginPanel.localString").each(function(index) {
  console.log($(this).html());
});

into the firebug console it works correctly. Can someone help me?

Answer 1

The 2nd parameter for $.load() must be a function that will be called once completion. You are not providing a function, but the result of calling _this.localize(element). So basically, the localize function is called before adding the listener, and since it returns undefined you have no handler.

Try with:

$('#content').load('template/loginPanel.html', 
  function(){
    _this.localize(element);
});