CODEWITHSUNDEEP
javascriptjquery
Mona Coder
Mona Coder

Reputation: 6316

Not able to change property of dynamically added element

I am working on the following demo. Why am I not able to change the css rule of hidden element #prev in popover here?

$("[data-toggle=popover]").each(function(i, obj) {

$(this).popover({
  html: true,
  content: function() {
    var id = $(this).attr('id')
    return $('#popover-content-' + id).html();
  }
});

});

$(document).on("click","#next", function(){
    console.log('Click on Next is working but the #prev is not displaying!');
   $("#prev").css('display','block');
});
#prev{
   display:none;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="container">
    <a data-toggle="popover" data-container="body" data-placement="right" type="button" class="btn btn-secondary" data-html="true" href="#" id="login">Display</a>
    <div id="popover-content-login" class="d-none">
        <button id="next"> Next</button>
        <button id="prev"> Prev</button>
    </div>
</div>

Upvotes: 1

Views: 34

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

The problem is because, due to the way the popover() library works by cloning HTML, you're duplicating the same id within the page. When selecting by that id it then only reads the first one found, which is not the visible one. To fix the issue, use DOM traversal to find the .prev relative to the clicked .next, and change the id attributes to class. Try this:

$("[data-toggle=popover]").each(function(i, obj) {
  $(this).popover({
    html: true,
    content: function() {
      var id = $(this).attr('id')
      return $('#popover-content-' + id).html();
    }
  });
});

$(document).on("click", ".next", function() {
  $(this).next(".prev").show();
});
.prev {
  display: none;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="container">
  <a data-toggle="popover" data-container="body" data-placement="right" type="button" class="btn btn-secondary" data-html="true" href="#" id="login">Display</a>
  <div id="popover-content-login" class="d-none">
    <button class="next"> Next</button>
    <button class="prev"> Prev</button>
  </div>
</div>

Upvotes: 2

Related Questions