单击后无法追加子项

Question

这是我的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>

    `

   });

我的完整代码：

var data = [{

    "content": "first content"

  },

  {

    "content": "second content"

  }

];

$('.data').click(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>

  `)

});

.data {

  background: tomato;

  color: white;

  padding: 8px;

  display: inline;

  cursor: pointer;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wrap">

  <p>

    Hi, Please click data

  </p>

  <div class="data" data-content="0">data 1</div>

  <div class="data" data-content="1">data 2</div>

</div>

我无法点击数据2

我在附录中添加了之前的 HTML (<div class="data" data-content="0">和)。<div class="data" data-content="1">有办法解决我的问题吗？

谢谢

Answer 1

您要替换.data附加了事件处理程序的元素。如果你只是写入<p>而不是重写整个 DIV 会更好。var data = [{    "content": "first content"  },  {    "content": "second content"  }];$('.data').click(function() {  var datacontent = $(this).data('content');  //alert (datacontent)    $(this).siblings("p").text(data[datacontent].content)});.data {  background: tomato;  color: white;  padding: 8px;  display: inline;  cursor: pointer;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="wrap">  <p>    Hi, Please click data  </p>  <div class="data" data-content="0">data 1</div>  <div class="data" data-content="1">data 2</div></div>

Answer 2

请尝试var data = [{&nbsp; &nbsp; "content": "first content"&nbsp; },&nbsp; {&nbsp; &nbsp; "content": "second content"&nbsp; }];//$('.data').click(function() {$(document).on('click','.data', function(){&nbsp; var datacontent = $(this).attr('data-content');&nbsp; //alert (datacontent)&nbsp; $(this).parent().html('').append(`&nbsp; &nbsp; <div class="wrap">&nbsp; &nbsp; &nbsp; <p>${data[datacontent].content}</p>&nbsp; &nbsp; &nbsp; <div class="data" data-content="0">data 1</div>&nbsp; &nbsp; &nbsp; <div class="data" data-content="1">data 2</div>&nbsp; &nbsp; </div>&nbsp; `)});

Answer 3

您不需要替换整个 html 代码，只需替换同级p标签即可。var data = [{&nbsp; &nbsp; "content": "first content"&nbsp; },&nbsp; {&nbsp; &nbsp; "content": "second content"&nbsp; }];$('.data').on('click', function(e) {&nbsp; var datacontent = $(this).attr('data-content');&nbsp; $(this).siblings("p").html(data[datacontent].content)});.data {&nbsp; background: tomato;&nbsp; color: white;&nbsp; padding: 8px;&nbsp; display: inline;&nbsp; cursor: pointer;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="wrap">&nbsp; <p>&nbsp; &nbsp; Hi, Please click data&nbsp; </p>&nbsp; <div class="data" data-content="0">data 1</div>&nbsp; <div class="data" data-content="1">data 2</div></div>