Question

我正在动态创建标签。我创建了一个按钮 removeTabs 来删除标签。它工作正常，但当我尝试使用div * x *时，它无法正常工作..

html

<!DOCTYPE html>
<html>
    <head>
        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#tabs").tabs();
        });
    </script>
</head>
<body style="font-size:62.5%;">
    <div id="tabs">
        <ul>
        </ul>
    </div>
    <input type='button' id='addTab' value='Add Tab'>
    <input type='button' id='removeTab' value='RemoveTab'>
</body>
</html>

JS：

$(function() {
    var index = 0;
    index++;

    $("#addTab").live ('click',function() {
        index++;
        var title = 'Tab.....  ' + index + ' <p title="close" id="removeTab" style="cursor: pointer; display: inline" >x</p>';
        var url = '#fragment-'+index;
        addTab(url,title,index);
    });

    function addTab(url, title, index) {    
        $('#tabs').tabs("add",url,title,[index]);
    }

    $('#removeTab').live('click',function() {
        var $tabs = $('#tabs').tabs();
        var selected = $tabs.tabs('option', 'selected');
        alert(selected);
        $('#tabs').tabs("remove" , [selected] );        
    });
});

点击 x

后，它无效

JS小提琴：http://jsfiddle.net/6VrwD/23/

Answer 1

您不能拥有多个具有相同ID的元素。尝试使用特定类，例如add-tab和remove-tab。

编辑1：

我看起来好像您的问题与在锚点中呈现<p>标记的选项卡有关。您可以在锚点后添加X，然后然后绑定点击事件。

编辑2：

我第一次遇到jqueryui标签:) ---看起来好像你需要一个tabTemplate，如下例所示：http://jqueryui.com/demos/tabs/#manipulation

Answer 2

我会使用tabTemplate选项，就像他们提供的演示一样：

$(document).ready(function() {
    $("#tabs").tabs({
        tabTemplate: "<li><a href='#{href}'>#{label}</a> <p title='close' id='removeTab' style='cursor:pointer;display:inline'>x</p></li>"
    });
});

...然后稍微调整一下JS的其余部分：

$(function() {
    var index = 0;
    index++;

    $("#addTab").live('click', function() {
        index++;
        var title = 'Tab.....  ' + index;
        var url = '#fragment-' + index;


        addTab(url, title, index);

    });

    function addTab(url, title, index) {

        $('#tabs').tabs("add", url, title, [index]);
    }


    $('#removeTab').live('click', function() {
        var $tabs = $('#tabs').tabs();
        var selected = $tabs.tabs('option', 'selected');
        alert(selected);
        $('#tabs').tabs("remove", [selected]);
    });
});

示例： http://jsfiddle.net/andrewwhitaker/6VrwD/27/

此外，您可能希望在生成的选项卡上使用类而不是ID。在页面上具有相同id属性的多个元素无效，可能会导致问题。

Jquery函数正在使用按钮但不使用div

2 个答案: