如何通过创建多个元素来停止点击事件?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (60)

我做了一个动态创建选项卡的项目。例如,每次用户点击“电子邮件”按钮时,它会创建一个新的“电子邮件”选项卡(其中还包括一个'x'符号以将其删除)。我想要阻止点击事件创建多个选项卡。但是,在用户点击选项卡的'x'符号后,我希望用户能够再次创建它。

$("#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();
});

#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>
提问于
用户回答回答于
// 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;
用户回答回答于

$("#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>

所属标签

可能回答问题的人

  • 人生的旅途

    10 粉丝484 提问5 回答
  • 无聊至极

    4 粉丝504 提问5 回答
  • 嗨喽你好

    7 粉丝480 提问4 回答
  • 富有想象力的人

    4 粉丝0 提问3 回答

扫码关注云+社区

领取腾讯云代金券