Question

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. There 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/

Answer 1

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

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