No estoy seguro de por qué, pero al hacer clic en mi botón, mi código sigue agregando aunque parece que la declaración if es falsa después de la primera adición.
En la línea 9, verifico si alguna clase .tab tiene un atributo que no es igual a mi variable sysId. No importa lo que haga, sigue agregando. Quiero que solo se agregue una vez SI un .tab no tiene un atributo de data-sysid= sysid ya en su lugar.
var recordHtml = '<div class="tab-content-record" data-sysid="">This is a record opened from the list.</div>'; // Open Record Tab $(".tab-content-list-button").click(function () { var sysId = $(this).data('sysid'); var title = $(this).data('title'); var tabHtml = '<div class="tab record" data-sysid="' + sysId + '"><div class="tab-title">' + title + '</div><div class="close-tab">X</div></div>'; if ($('.tab').attr('data-sysid') != sysId) { $(".tab-list").append(tabHtml); } //$(".tab-list").append(tabHtml); })Aquí está mi violín que lo muestra trabajando con HTML y CSS: https://jsfiddle.net/fju60bca/1/
Tiene muchos elementos de pestaña en la página, por lo que la siguiente declaración no devolverá el atributo que está buscando:
$('.tab').attr('data-sysid')Debe verificar cada elemento de la pestaña para ver si existe el que está buscando:
let buttonExists = false; $("div.tab").each(function(index, tabElem) { if ($(tabElem).data('sysid') === sysId) buttonExists = true; }); if (!buttonExists) { $(".tab-list").append(tabHtml); }