Question

As mentioned i would like to know how i can apply the live() function to this code.

This code will be inserted by javascript:

<a class="link" href="url"><span>This content is hidden</span></a>  

This is the javascript that needs to be live:

$('.link').append('<span class="hover"></span>').each(function () {
      var $span = $('> span.hover', this).css('opacity', 0);
      $(this).hover(function () {
        $span.stop().fadeTo(500, 1);
      }, function () {
        $span.stop().fadeTo(500, 0);
      });
    });

A simple adding of .live(). didnt seem to do the trick

any help appreciated!

Answer 1

I do not know exactly what you are trying to do, but I make this assumption:
You are adding an “a” tag, and then want append a “span” that when hovered, has those events.

This is not “live”, and I make the assumption that you know when you are adding the ‘a’ tag. When you do that, simply call the AddEvents function to do the append, give the child some CSS, then apply a “hover” to the newly added child.
Something like this should work, not fancy, but should work:

function AddEvents()
{
    $('.link').append('<span class="hover"></span>');
    var $span = $('.link span.hover');
    $span.css('opacity', 0);
    $span.hover(function()
    {
        this.stop().fadeTo(500, 1);
    }, function()
    {
        $span.stop().fadeTo(500, 0);
    });
};

// call the function when needed
AddEvents();

NOTE: IF you know the newly added ‘a’ context, you could pass that via the AddEvents(); function call, and work that in like this:

AddEvents($(this));//or the selector for that 'a' link

function AddEvents(scopeItem)
{
    scopeItem.append('<span class="hover"></span>');
    var $span = $('span.hover', scopeItem);
    $span.css('opacity', 0);
    $span.hover(function()
    {
        this.stop().fadeTo(500, 1);
    }, function()
    {
        $span.stop().fadeTo(500, 0);
    });
};