CODEWITHSUNDEEP
javascripthtmljquerycss
dedi wibisono
dedi wibisono

Reputation: 533

Can't Append Child After Click

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

Upvotes: 0

Views: 46

Answers (3)

machupichu123
machupichu123

Reputation: 21

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

Upvotes: 1

wangdev87
wangdev87

Reputation: 8751

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>

Upvotes: 0

Barmar
Barmar

Reputation: 781141

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?

Upvotes: 1

Related Questions