如何阻止click事件创建多个元素？
如何阻止click事件创建多个元素？
提问于 2018-05-30 00:52:55
我做了一个动态创建标签的项目。例如，用户每次单击“电子邮件”按钮时，都会创建一个新的“电子邮件”选项卡(还包括一个“x”符号来删除它)。我想阻止单击事件创建多个选项卡。但是，在用户单击选项卡的“x”符号后，我希望用户能够再次创建它。
http://jsfiddle.net/v6awanwn/1/
$("#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>
回答 3
Stack Overflow用户
发布于 2018-06-01 03:14:35
$("#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();
}
});#mainTab li span {
position: relative;
top: -31px;
left: 5px;
}<!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>
你在找这个吗？
Stack Overflow用户
发布于 2018-06-01 15:20:19
我认为实现这一点的最好方法是检查带有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();
});Stack Overflow用户
发布于 2018-06-01 03:03:44
我不太确定您在这里要做什么，但我猜您想要这样做，所以每个选项卡中只能有一个，在这种情况下，您可以只添加一个bool数据类型，该数据类型只存储特定类型的选项卡是否已经打开。在添加新选项卡之前，只需运行一条简单的if语句。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50589360
复制相关文章
相似问题