单击后无法追加子项

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 = [{

    "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>

  `)

});

Answer 3

您不需要替换整个 html 代码，只需替换同级p标签即可。

var data = [{

    "content": "first content"

  },

  {

    "content": "second content"

  }

];

$('.data').on('click', function(e) {

  var datacontent = $(this).attr('data-content');

  $(this).siblings("p").html(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>