Jquery "Live" click event not firing within an anchor tag

I'm having trouble with a click event setup to fire when a close icon is clicked.

The event is below:

var addTabRemoveEvent = function(tabs) {

    $('.tab-close').live( 'click', function(e) {
        e.stopImmediatePropagation();
        tabs.tabs('remove',tabs.tabs('option','selected'));
    });
};

The close class is within a span for example:

<a href="#tabs-1"><span class="tab-name">Tab 1</span><span class="tab-close"></span></a>

The CSS I'm using on the "tab close" is as follows:

.tab-close { cursor:pointer; margin-left:5px; width:11px; height:11px; display:inline-block; background:transparent url(../images/button_hide.gif) !important;  }

Just to note, this setup has worked just fine in the past but for some reason has stopped working. For instance testing with the 1.9 milestone Jquery UI release works fine. Down grading to 1.8.16 and it seems to have stopped working. T开发者_StackOverflow社区here may be other reasons.

Placing the close outside the anchor is an option but one I would like to overlook for the moment since this setup has worked before and works well with my projects current setup.

Any help would be much appreciated.

I've added a JSFiddle for peeps to play with: http://jsfiddle.net/MezfS/1/

---

Using delegate and catching the click event at the anchor solved my issue:

http://jsfiddle.net/MezfS/21/

---

Hey when I changed your click event to this:

$('.tab-close').bind('click', function(e) {...

Using bind rather than live it worked fine. Now if you are dynamically adding them too, it may not work after you add one, from experience.