Question

我做了一个动态创建标签的项目。例如，每次用户点击＆＃34;电子邮件＆＃34;按钮，它会创建一个新的＆＃34;电子邮件＆＃34;标签（还包含用于删除它的＆＃39; x＆＃39;符号）。我想阻止点击事件创建多个标签。但是，在用户点击标签页＆＃39; x＆＃39;符号，我希望用户能够再次创建它。

http://jsfiddle.net/v6awanwn/1/

＆＃13;

$("#mainTab").on("click", "a", function(e) {
    $(this).tab('show');
  })
  .on("click", "span", function() {
    var anchor = $(this).siblings('a');
    $(anchor.attr('href')).remove();
    $(this).parent().remove();
    $(".nav-tabs li").children('a').first().click();
  });
$('.gtab').click(function(e) {
  var id = $("#mainTab").children().length + 1;
  var tabId = 'contact_' + id;
  var tabtitle = $(this).find('span').html();
  $('#mainTab').closest('li').before('<li><a href="#contact_' + id + '">New Tab</a> <span> x </span></li>');
  $('<li><a href="#contact_' + id + '">' + tabtitle + '</a> <span> x </span></li>').appendTo('#mainTab');
  $('#tabpanel .tab-content').append('<div style="height:400px;" class="tab-pane" id="' + tabId + '">' + tabtitle + '</div>');
  $('#mainTab li:nth-child(' + id + ') a').click();
});

＆＃13;

#mainTab li span {
  position: relative;
  top: -31px;
  left: 5px;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

  <div>
    <ul>
      <li class="gtab">
        <a><span title="Email">Email</span></a>
      </li>
      <li class="gtab">
        <a><span title="system">system</span></a>
      </li>
    </ul>
  </div>
  <div class="tabbable" id="tabpanel">
    <ul id="mainTab" class="nav nav-tabs"></ul>
    <div class="tab-content">
    </div>
  </div>

＆＃13;

Answer 1

如果您有两个具有相同文本的元素，则不会执行任何操作。为了实现它，您可以在点击事件中使用以下代码：

// Get title by text
var tabtitle = $(this).find('span').text();

// Checking for similar element by text
if($("#mainTab li").find('a').text().indexOf(tabtitle) >= 0)
    return;

Online demo (jsFiddle)

Answer 2

如果您根据每个选项卡的类型为每个选项卡指定一个ID，则可以先检查是否存在任何此类选项卡（使用length）。如果他们不这样做，那么就可以创建新标签。

$("#mainTab").on("click", "a", function(e) {
  $(this).tab('show');
})
.on("click", "span", function() {
  var anchor = $(this).siblings('a');
  $(anchor.attr('href')).remove();
  $(this).parent().remove();
  $(".nav-tabs li").children('a').first().click();
});

$('.gtab').on("click", function(e) {
  var tabTitle = $(this).find('span').html();
  var id = 'contact_' + tabTitle;
  var count = $("#" + id).length;

  if (count === 0) {
    var $newTab = $('<li><a href="#' + id + '">' + tabTitle + '</a> <span> x </span></li>');
    var $newContent = $('<div style="height:400px;" class="tab-pane" id="' + id + '">' + tabTitle + '</div>');

    $('#mainTab').append($newTab);
    $('#tabpanel .tab-content').append($newContent);
    $newTab.find("a").click();
  }
});

#mainTab li span {
  position: relative;
  top: -31px;
  left: 5px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div>
  <ul>
    <li class="gtab">
      <a><span title="Email">Email</span></a>
    </li>
    <li class="gtab">
      <a><span title="system">System</span></a>
    </li>
  </ul>
</div>
<div class="tabbable" id="tabpanel">
  <ul id="mainTab" class="nav nav-tabs"></ul>
  <div class="tab-content">
  </div>
</div>

Answer 3

＆＃13;

$("#mainTab").on("click", "a", function (e) {
    e.preventDefault();
    //if (!$(this).hasClass('add-contact')) {
    $(this).tab('show');
    //}
})
    .on("click", "span", function () {
        var anchor = $(this).siblings('a');
        $(anchor.attr('href')).remove();
        $(this).parent().remove();
        $(".nav-tabs li").children('a').first().click();
    });

$('.gtab').click(function (e) {
    console.log('tset');
    //e.preventDefault();
    e.stopPropagation();
    var tabExist = 0;
    var id = $("#mainTab").children().length + 1; //think about it ;);
  var tabId = 'contact_' + id;
    var tabtitle = $(this).find('span').html();
    $("#mainTab li a").each(function(){
    		if($(this).html() == tabtitle){
        	tabExist =1;
        }
    });
    

if(tabExist == 1){
	e.preventDefault();
}else{
	    //$('#mainTab').closest('li').before('<li><a href="#contact_' + id + '">New Tab</a> <span> x </span></li>');
    $('#mainTab').closest('li').before('<li><a href="#contact_' + id + '">New Tab</a> <span> x </span></li>');
    $('<li><a href="#contact_' + id + '">' + tabtitle + '</a> <span> x </span></li>').appendTo('#mainTab');
    $('#tabpanel .tab-content').append('<div style="height:400px;" class="tab-pane" id="' + tabId + '">' + tabtitle + '</div>');
    //$('#tabpanel .tab-content').append('<div class="tab-pane" id="' + tabId + '">Contact Form: New Contact ' + id + '</div>');
    $('#mainTab li:nth-child(' + id + ') a').click();

}
});

＆＃13;

#mainTab li span {
    position: relative;
    top: -31px;
    left: 5px;
}

＆＃13;

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link href="common.css" rel="stylesheet" />
</head>
<body>
    <div>
        <ul>
            <li class="gtab">
                <a><span title="Email">Email</span></a>
            </li>
            <li class="gtab">
                <a><span title="system">system</span></a>
            </li>
        </ul>
    </div>
    <div class="tabbable" id="tabpanel">
        <ul id="mainTab" class="nav nav-tabs"></ul>
        <div class="tab-content">
        </div>
    </div>
   <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="common.js"></script>
</body>
</html>

＆＃13;

你在找这个吗？

Answer 4

我认为实现此目的的最佳方法是检查是否已存在tabtitle的标签。对于这个例子，我想稍微改变你的代码。首先，我想在代码创建的选项卡data-tab-title中添加一个新属性，这样可以更轻松地对选项卡进行细化。接下来，您需要一个条件来检查选项卡是否存在，if ($('#tabpanel .tab-content div[data-tab-title="' + tabtitle + '"]').length > 0) return;。以下是.gtab的完整点击处理程序：

$('.gtab').click(function (e) {
    console.log('tset');
    //e.preventDefault();
    e.stopPropagation();
    var id = $("#mainTab").children().length + 1; //think about it ;)
    var tabId = 'contact_' + id;
    var tabtitle = $(this).find('span').html();

    if ($('#tabpanel .tab-content div[data-tab-title="' + tabtitle + '"]').length > 0) return;

    //$('#mainTab').closest('li').before('<li><a href="#contact_' + id + '">New Tab</a> <span> x </span></li>');
    $('#mainTab').closest('li').before('<li><a href="#contact_' + id + '">New Tab</a> <span> x </span></li>');
    $('<li><a href="#contact_' + id + '">' + tabtitle + '</a> <span> x </span></li>').appendTo('#mainTab');
    $('#tabpanel .tab-content').append('<div style="height:400px;" class="tab-pane" id="' + tabId + '" data-tab-title="' + tabtitle + '">' + tabtitle + '</div>');
    //$('#tabpanel .tab-content').append('<div class="tab-pane" id="' + tabId + '">Contact Form: New Contact ' + id + '</div>');
    $('#mainTab li:nth-child(' + id + ') a').click();
});

Answer 5

我不确定你在这里尝试做什么，但我猜你想做到这一点，所以你只能拥有每个标签中的一个，在这种情况下你只需添加一个{{1} } datatype只存储某个类型的选项卡是否已打开。在添加新标签之前，只需运行一个简单的bool语句。

如何阻止点击事件创建多个元素？

5 个答案: