can we write script for the button which is inside the popover?

Question

I have created a popover so that if I click on the image the popover should appear.

The popover is working. what my main problem is I have inserted buttons in the popover.

so I want to write javascript or jquery code for the button when it is clicked. Can anyone help on this?

I have tried but it's not working!!!!

$(function() {
  $('button').click(function() {
    var x = $(this).attr('class');
    alert(x);
  });
});
$(function() {
  $("[data-toggle=popover]").popover({
    html: true,
    container: 'body',
    content: function() {
      var content = $(this).attr("data-popover-content");
      return $(content).children(".popover-body").html();
    },
    title: function() {
      var title = $(this).attr("data-popover-content");
      return $(title).children(".popover-heading").html();
    },
    placement: "auto"
  });
});

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="./isobar.js">
</script>


<span>
<img src="./img/more_options_icon.png" data-toggle="popover" tabindex="5" data-trigger="focus" data-popover-content="#moreoptions">
</span>
<div id="moreoptions" class="hidden">
  <div class="popover-body">
    <div class="list-group">
      <button type="button" class="list-group-item"><span class="gap"></span>Edit</button>
      <button type="button" class="list-group-item"><span class="gap"></span>Logic Builder</button>
      <button type="button" class="list-group-item"><span class="gap"></span>Uneploy</button>

    </div>
  </div>
</div>

Answer 1

O.k. Here is an updated version of my answer and checked and working code. A secret of a popover is to fire the correspondence function in a right time with a popover firing. So the JS code is:

function firePopover() {
            $('.hidden').css('display', 'block');
            var delay = 100;
            setTimeout(function () {
                $('button:not(.main)').unbind('click');
                $('button:not(.main)').click(function () {
                    var x = $(this).attr('class');
                    alert(x);
                    $('.hidden').css('display', 'none');
                });
            }, delay);
        }

Here I an using html selector

:not(.main)

to prevent binding and unbinding events to the main button. In addition, we have to pay attention on the fact that every popover rising binds a new event handler to each button. This means that after n popover risings every button will fire it's alert n times. To prevent this effect, it is possible to bind events in the first rising only, or as I did, to unbind an event from a button every popover rising. As to html code, here it is:

<button class="main" onclick="firePopover()">Fire Popover</button>
<div id="moreoptions" class="hidden" hidden>
    <div class="popover-body">
        <div class="list-group">
            <button class="class-0 list-group-item"><span class="gap"></span>Edit</button>
            <button class="class-1 list-group-item"><span class="gap"></span>Logic Builder</button>
            <button class="class-2 list-group-item"><span class="gap"></span>Uneploy</button>
        </div>
    </div>
</div>

I only added the ".main" button to accept a simulation, and each button got additional corresponding class "class-0", "class-1", "class-2" for successful demonstration. Now, when you push on the main button, other 3 buttons appear. And to the contrary, pushing on any of those 3 buttons, is following by alert firing and disappearing of all of them. I hope this will help you.

 function firePopover() {
            $('.hidden').css('display', 'block');
            var delay = 100;
            setTimeout(function () {
                $('button:not(.main)').unbind('click');
                $('button:not(.main)').click(function () {
                    var x = $(this).attr('class');
                    alert(x);
                    $('.hidden').css('display', 'none');
                });
            }, delay);
        }

.hidden {
  display: none;
}

button {
  float: left;
}

.class-0 {
  clear: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="main" onclick="firePopover()">Fire Popover</button>
    <div id="moreoptions" class="hidden" hidden>
        <div class="popover-body">
            <div class="list-group">
                <button class="class-0 list-group-item"><span class="gap"></span>Edit</button>
                <button class="class-1 list-group-item"><span class="gap"></span>Logic Builder</button>
                <button class="class-2 list-group-item"><span class="gap"></span>Uneploy</button>
            </div>
        </div>
    </div>