Thomas
Thomas

Reputation: 143

Add button to jquery ui tabs

I using jquery tabs, and it's working fine.

I also want to add a button to edit the label of the tab, but jquery don't listening the clic on my button, like a z-index problem. I put a "z-index: 10000;" on the button, but it don't work, i just changing of tab.

My tab :

<li><a href="#tab1"><span style="z-index: 100000;" class="button 
   editLibelleCategorie"></span>
   <br>Tabs 1</a>
</li>

and my js code :

$(document).on('click', '.editLibelleCategorie', function()
{
    alert('ok');
    $("#modalEditCategorie").modal('show');

});

Alert is not display when I click on button ...

Thank for your help !

Upvotes: 1

Views: 759

Answers (4)

user8603030
user8603030

Reputation:

Try this. http://jsfiddle.net/6t6yzffa/

$("#tabs").tabs({
    activate: function (event, ui) {}
});


$('#tabs').on('tabsbeforeactivate', function (event, ui){
    alert('The current tab');
});

Upvotes: 0

yPhil
yPhil

Reputation: 8357

A click on the active tab to rename it:

$tabs.on('mouseup', '.ui-tabs-active a', function(e){
    e.preventDefault();
    if (e.which === 1)
        Dialog.renameTab($(this))
});

Upvotes: 0

Abi
Abi

Reputation: 734

Instead of using document mention Your class name for the button in Jquery as follows

$('.editLibelleCategorie').on('click', function()
{
    alert('ok');
    $("#modalEditCategorie").modal('show');

});

Upvotes: 1

Try the solution as below.

$('.editLibelleCategorie').on('click', function()
{
    alert('ok');
    $("#modalEditCategorie").modal('show');

});

Upvotes: 1

Related Questions