Question

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

popover正在运作。我的主要问题是我在popover中插入了按钮。

所以我想在点击按钮时为按钮编写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

O.k。这是我的答案和检查和工作代码的更新版本。弹出窗口的一个秘密就是在弹出窗口的情况下在适当的时间触发通信功能。所以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)

防止绑定和解除绑定事件到主按钮。另外，我们必须注意这样一个事实：每个popover上升都会将一个新的事件处理程序绑定到每个按钮。这意味着在n个弹出窗口上升后，每个按钮都会触发它的警报n次。为了防止这种影响，可以仅在第一次上升时绑定事件，或者像我一样，在每次弹出上升时从按钮取消绑定事件。至于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个按钮。而相反，按下这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>

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

1 个答案: