javascript - 我们可以为弹出窗口内的按钮编写脚本吗？

Question

我创建了一个弹出窗口，这样如果我单击图像，就会出现弹出窗口。

弹出窗口正在工作。我的主要问题是我在弹出窗口中插入了按钮。

所以我想在单击按钮时为按钮编写javascript或jquery代码。有人可以帮忙吗？

我已经尝试过了，但是没用!!!!

$(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

好的。这是我的答案的更新版本以及经过检查和工作的代码。弹出窗口的一个 secret 是在正确的时间通过弹出窗口触发来触发通信功能。所以JS代码是:

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

这里我使用 html 选择器

:not(.main)

防止将事件绑定(bind)和取消绑定(bind)到主按钮。另外，我们必须注意每个弹出窗口的上升都会为每个按钮绑定(bind)一个新的事件处理程序。这意味着在 n 次弹出窗口出现后，每个按钮都会触发 n 次警报。为了防止这种效果，可以仅在第一次上升时绑定(bind)事件，或者像我一样，在每次弹出窗口上升时从按钮取消绑定(bind)事件。至于html代码，这里是:

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

我只添加了“.main”按钮来接受模拟，每个按钮都附加了相应的类“class-0”，“class-1”，“class-2”以成功演示。现在，当您按下主按钮时，会出现其他 3 个按钮。相反，按下这三个按钮中的任何一个，都会触发警报并消失。我希望这会对您有所帮助。

 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>