我們可以為彈出框內的按鈕編寫腳本嗎？

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

好的，這是我的答案的更新版本，並檢查並工作了。 彈出窗口的秘訣是在適當的時候通過彈出窗口觸發來啟動對應功能。 因此，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)

防止綁定和取消綁定事件到主按鈕。 另外，我們必須注意一個事實，即每次彈出的彈出窗口都會為每個按鈕綁定一個新的事件處理程序。 這意味着在彈出窗口增加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>