Question

点击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/

你能告诉我如何解决这个问题吗？

Answer 1

如果您只想让链接工作一次，请使用.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（...）

Answer 2

有很多解决方案..

一个是给表一个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/

Answer 3

我会使用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>");
});

如何避免多次附加内容

3 个答案: