jQuery updating elements added on the fly?

Question

My code is not working, i think because elements are added on the fly :

var tooltip = $('<div/>').insertAfter('.trigger').addClass('tooltip');
var tname = $('<span/>').addClass('tname').text('(...)');
tooltip.html(tname.html()):

// Ajax call
success: function() {
  tname.html('success'); // not working
  $('.tooltip').find('.tname').html('success'); // not working
  $('.tname').html('success'); // not working
}

Answer 1

You're not inserting the span into the DOM.

//                                                       append to some element
var tname = $('<span/>').addClass('tname').text('(...)').appendTo(tooltip);

Only then you can use selectors to find the element and do something with it.

Answer 2

This won't work because you are not inserting the tname element into the DOM. See this fix below:

var tooltip = $('<div/>').insertAfter('.trigger').addClass('tooltip');
var tname = $('<span/>').addClass('tname').text('(...)');
tooltip.html("");
tooltip.append(tname);

// Ajax call
success: function() {
  tname.html('success'); // should work
  $('.tooltip').find('.tname').html('success'); // should work
  $('.tname').html('success'); // should work
}