如何避免被追加多次

在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

回答

相關問題