Javascript Can'；单击后不附加子项

这是我的JS

$('.data').click(function(){
  var datacontent = $(this).attr('data-content');
  $(this).parent().html('').append(`
    <div class="wrap">
      <p>${data[datacontent].content}</p>
      <div class="data" data-content="0">data 1</div>
      <div class="data" data-content="1">data 2</div>
    </div>
    `
   });

您好，请点击数据

数据1
数据2

您正在替换已附加事件处理程序的

.data

元素

如果您只是写入

，而不是重写整个DIV，那会更好

var数据=[{
“内容”：“第一内容”
},
{
“内容”：“第二内容”
}
];
$（'.data'）。单击（函数（）{
var datacontent=$（this.data（'content'）；
//警报（数据内容）
$（this）.p”）.text（数据[datacontent].content）
});
.data{
背景：番茄；
颜色：白色；
填充：8px；
显示：内联；
光标：指针；
}


您好，请点击数据

数据1
数据2
您正在替换已附加事件处理程序的
.data
元素

如果您只是写入
，而不是重写整个DIV，那会更好


var数据=[{
“内容”：“第一内容”
},
{
“内容”：“第二内容”
}
];
$（'.data'）。单击（函数（）{
var datacontent=$（this.data（'content'）；
//警报（数据内容）
$（this）.p”）.text（数据[datacontent].content）
});
.data{
背景：番茄；
颜色：白色；
填充：8px；
显示：内联；
光标：指针；
}


您好，请点击数据

数据1
数据2
您不需要替换整个html代码，只需替换同级
p
标记即可


var数据=[{
“内容”：“第一内容”
},
{
“内容”：“第二内容”
}
];
$（'.data'）。在（'click'，函数（e）上{
var datacontent=$（this.attr（'data-content'）；
$（this）.chiness（“p”）.html（数据[datacontent].content）
});
.data{
背景：番茄；
颜色：白色；
填充：8px；
显示：内联；
光标：指针；
}


您好，请点击数据

数据1
数据2
您不需要替换整个html代码，只需替换同级
p
标记即可


var数据=[{
“内容”：“第一内容”
},
{
“内容”：“第二内容”
}
];
$（'.data'）。在（'click'，函数（e）上{
var datacontent=$（this.attr（'data-content'）；
$（this）.chiness（“p”）.html（数据[datacontent].content）
});
.data{
背景：番茄；
颜色：白色；
填充：8px；
显示：内联；
光标：指针；
}


您好，请点击数据

数据1
数据2
请再试一次

var data = [{
    "content": "first content"
  },
  {
    "content": "second content"
  }
];

//$('.data').click(function() {
$(document).on('click','.data', function(){
  var datacontent = $(this).attr('data-content');
  //alert (datacontent)

  $(this).parent().html('').append(`
    <div class="wrap">
      <p>${data[datacontent].content}</p>
      <div class="data" data-content="0">data 1</div>
      <div class="data" data-content="1">data 2</div>
    </div>
  `)
});


var数据=[{
“内容”：“第一内容”
},
{
“内容”：“第二内容”
}
];
//$（'.data'）。单击（函数（）{
$（文档）.on（'单击'，'.data'，函数（）{
var datacontent=$（this.attr（'data-content'）；
//警报（数据内容）
$（this.parent（）.html（“”）.append(`
${data[datacontent].content}

数据1
数据2
`)
});
请再试一次

var data = [{
    "content": "first content"
  },
  {
    "content": "second content"
  }
];

//$('.data').click(function() {
$(document).on('click','.data', function(){
  var datacontent = $(this).attr('data-content');
  //alert (datacontent)

  $(this).parent().html('').append(`
    <div class="wrap">
      <p>${data[datacontent].content}</p>
      <div class="data" data-content="0">data 1</div>
      <div class="data" data-content="1">data 2</div>
    </div>
  `)
});


var数据=[{
“内容”：“第一内容”
},
{
“内容”：“第二内容”
}
];
//$（'.data'）。单击（函数（）{
$（文档）.on（'单击'，'.data'，函数（）{
var datacontent=$（this.attr（'data-content'）；
//警报（数据内容）
$（this.parent（）.html（“”）.append(`
${data[datacontent].content}

数据1
数据2
`)
});
您正在替换绑定了事件处理程序的元素，因此您将丢失事件处理程序。我尝试了此$（this）.parent（）.append（'/*code*/'），但不起作用。您正在替换绑定了事件处理程序的元素，因此您将丢失事件处理程序。我尝试了此$（this）.parent（）.append（'/*code*/'），但也不起作用