引导程序确认弹出窗口

Question

我有一个引导确认弹出窗口的小问题。 我有下一个php代码：

 $rezPet = mysqli_query($kon, "SELECT * FROM pets WHERE user_id = ". $userId ." ORDER BY id DESC");
while($redPet = mysqli_fetch_assoc($rezPet)){
    ...
    ...
    ...
    <div id=\"dropdown-". $redPet["id"] ."\" class=\"col-md-6 col-xs-12\" style=\"padding-right:10px;z-index:99999999;". $showHideDropdown ."\">
    <!-- Split button -->
        <div class=\"btn-group pull-right\">
            <button type=\"button\" id=\"dataTitle\" data-title=\"Beheer informatie over uw dier\" class=\"btn btn-success btn-xs\"><i class=\"fa fa-pencil-square-o\"></i></button>
            <button type=\"button\" id=\"dataTitle\" data-title=\"Beheer informatie over uw dier\" class=\"btn btn-success btn-xs dropdown-toggle\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">
                <span class=\"caret\" style=\"margin-top:0;\"></span>
                <span class=\"sr-only\">Toggle Dropdown</span>
            </button>
            <ul id=\"drpDown-". $redPet["id"] ."\" class=\"dropdown-menu\">
                <li class=\"col-lg-12\">
                    <button id=\"dataTitle btnFound-". $redPet["id"] ."\" class=\"btnFound btn btn-success col-lg-12 col-sm-12 col-md-12 col-xs-12 btn-sm\" data-title=\"Klik hier als uw dier gevonden is\" data-target=\"#confirmBox-". $redPet["id"] ."\" data-toggle=\"modal\"><i class=\"fa fa-home\"></i>  Gevonden</button>
                </li>
                <div style=\"clear:both;\"></div><li role=\"separator\" class=\"divide5\"></li>
                <li class=\"col-lg-12\">
                    <form action=\"dier-toevoegen.php\" method=\"POST\">
                        <input type=\"hidden\" name=\"changeID\" value=\"". $redPet["id"] ."\">
                        <button id=\"dataTitle\" class=\"btn btn-info col-lg-12 col-sm-12 col-md-12 col-xs-12 btn-sm\" data-title=\"Klik hier om de informatie over uw dier te wijzigen\" type=\"submit\"><i class=\"fa fa-pencil\"></i>  Wijzigen</button>
                    </form>
                </li>
                <div style=\"clear:both;\"></div>
                <li role=\"separator\" class=\"divider\"></li>
                <li class=\"col-lg-12\">
                    <button id=\"btnVerwijderen-". $redPet["id"] ."\" class=\"linkDelete btn btn-danger col-lg-12 col-sm-12 col-md-12 col-xs-12 btn-sm\" data-title=\"Bent u zeker?\" data-toggle=\"confirmation\" data-placement=\"right\" data-singleton=\"true\" data-popout=\"true\" data-btn-ok-label=\"Ja!\" data-btn-ok-icon=\"glyphicon glyphicon-share-alt\" data-btn-ok-class=\"btn-success btn-xs\" data-btn-cancel-label=\"Noo!\" data-btn-cancel-icon=\"glyphicon glyphicon-ban-circle\" data-btn-cancel-class=\"btn-danger btn-xs\"><i class=\"fa fa-trash\"></i>  Verwijderen</button>
                </li>
            </ul>
        </div>
    </div>
    ...
    ...
    ...
}

然后我有下一个jquery代码：

<script type="text/javascript">
$(document).ready(function() {
     $(document).on("click","button[class*=linkDelete]", function(){
         var cijeliID = this.id.split("-");
         var id = cijeliID[1];
         $("#btnVerwijderen-"+id).confirmation('show');

     });
});
</script>

问题是，仅当我第二次单击下拉菜单中的Verwijderen按钮时，才看到弹出确认框。

我已经包含了最后的jquery.js和bootstrap.js脚本。 我还从https://github.com/mistic100/Bootstrap-Confirmation包含了bootstrap-confirmation.js脚本。

有任何想法吗？

Answer 1

这可能是因为您第一次调用$("#btnVerwijderen-"+id).confirmation('show')只是初始化。 尝试：

 $(document).on("click","button.linkDelete", function(){
     $(this).confirmation();
     $(this).confirmation('show');
 });

为了避免关闭单击菜单中的菜单，将event变量添加到其中并添加event.stopPropagation() ：

 $(document).on("click","button.linkDelete", function(event){
     event.stopPropagation();  
     $(this).confirmation();
     $(this).confirmation('show');
 });

检查演示-https: //jsfiddle.net/ermakovnikolay/c2fqveez/