Can't Append Child After Click

Question

Here is my 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>
    `
   });

My full code :

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>

I cannot click data 2

I add previous HTML (<div class="data" data-content="0"> and <div class="data" data-content="1">) in append. Any idea to fix my issue?

Thank you

You're replacing the element that has the event handler bound to it, so you're losing the event handler. — Barmar, Nov 30 '20 at 07:01
I try this $(this).parent().append('/*code*/') but didn't work too — dedi wibisono, Nov 30 '20 at 07:04

score 1 · Accepted Answer · answered Nov 30 '20 at 07:05

You're replacing the .data elements that had the event handler attached to them.

It would be better if you just wrote into the <p> instead of rewriting the entire 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>

If you really need to replace the whole thing, see Event binding on dynamically created elements?

score 1 · Answer 2 · answered Nov 30 '20 at 07:08

please try

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>
  `)
});

score 0 · Answer 3 · answered Nov 30 '20 at 07:07

You don't need to replace whole html code, but just the siblings p tag only.

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>

Can't Append Child After Click

3 Answers3