如何避免被追加多次

在USMarkets文本的点击量，我追加一些文本面板，但我面临的问题是，该内容被追加多次如何避免被追加多次

这是我的代码

$('#usmarket').click(function() { 
    var data = tableData(); 
    $('#usmarket .panel').html(data); 
    $('#usmarket .panel').after("<div class='redBox'></div>"); 
    $(".redBox").empty(); 
    $(".redBox").html("<p>I am Appended Multiple Times</p>"); 
}); 

function tableData() { 
    var html = '<table class="table table-striped">\ 
    <tr>\ 
     <td>3-Nov-2015</td>\ 
     <td>Gallup US ECI</td>\ 
     <td>8:30 AM ET</td>\ 
     <td class="text-center"><i class="indicator_wrap empty "></i></td>\ 
    </tr>\ 
    <tr>\ 
     <td>3-Nov-2015</td>\ 
     <td>Redbook</td>\ 
     <td>8:55 AM ET</td>\ 
     <td class="text-center"><i class="indicator_wrap empty "></i></td>\ 
    </tr>\ 
</table>'; 
    return html; 
}

http://jsfiddle.net/vztb9sae/5/

你能告诉我怎么解决这个问题？

来源

2015-11-03 Pawan

删除现有元素，然后添加新元素。使用'$（“。redBox”）。remove（）;'检查[Demo]（http://jsfiddle.net/tusharj/vztb9sae/10/）_OR_使用'one'绑定点击$（' （'click'，function（）'。检查[Demo]（http://jsfiddle.net/tusharj/vztb9sae/12/） – Tushar

有一堆的解决方案..

之一将是把桌上的一个ID，并检查该ID不存在添加

if($('#yourTable').length === 0)

https://jsfiddle.net/vztb9sae/6/

前另一个将创建一个本地变量

var shouldAddTable = true;

https://jsfiddle.net/vztb9sae/7/

，或者你可以在（）和关闭使用jquery（）

$('#usmarket').on('click', addTable);

https://jsfiddle.net/vztb9sae/11/

来源

2015-11-03 13:31:10 stackoverfloweth

谢谢@mplungjan，我没有意识到， – stackoverfloweth

其实，不是_deprecated_，但首选的方法是[在]（http://api.jquery.com/on/）和[关闭]（http://api.jquery.com/off/） – mplungjan

我相应地更新了我的答案。 – stackoverfloweth

我会使用DOM元素的data属性。如果没有设置，则追加文本，如果设置只返回

$('#usmarket').click(function() { 

    if ($(this).data('appended') == true) 
     return; 
    $(this).data('appended') = true; 

    var data = tableData(); 
    $('#usmarket .panel').html(data); 
    $('#usmarket .panel').after("<div class='redBox'></div>"); 
    $(".redBox").empty(); 
    $(".redBox").html("<p>I am Appended Multiple Times</p>"); 
});

来源

2015-11-03 13:34:22 EoiFirst

如果你只希望链接马上开始工作，用.one

$('#usmarket').one("click",function() { 
    $('#usmarket .panel').html(tableData()) 
    .after("<div class='redBox'></div>"); 
    $(".redBox").html("<p>I am Appended Once</p>"); 
});

如果你的意思是附后，那么就不要使用类对于redBox，如果您多次添加它们，所有这些都将添加到$（“。redbox”）。html（...）

来源

2015-11-03 13:36:32 mplungjan

回答

相关问题