繁体   English   中英

如果我单击包含“ href”的链接,则不会显示Bootbox模态

[英]Bootbox modal is not showing up if I click on a link that contains an “href”

好的,所以我正在使用启动箱,它可以完美运行,但是当我想在PHP的链接中发送变量时,所有的JavaScript都可以运行,但是启动箱却不能。

----这有效----

<a href='#' class="alert_without_href">I dont have an href</a>
<script>
$(document).ready(function()
 {
    $('a.alert_without_href').on('click', function()
    {
        alert('This works');
        bootbox.alert("This ALSO works");
    });
});
</script>

----这不起作用----

<a href="?name=Jacob" class="alert_with_href">I have an href</a><br><br>
<script>
   $(document).ready(function()
   {
      $('a.alert_with_href').on('click', function()
      {
        alert('This works');
        bootbox.alert("This one DOESNT work"); <---- PROBLEM IS HERE
        alert('This also works');
      });
   });
</script>

----然后最后显示----

<?php
    if ($_SERVER['REQUEST_METHOD'] === 'GET')
    {
        echo 'Hello ' . $_GET["name"];
    }  
?>

我确实需要在链接中传递变量,但无法将其取出。 我怎样才能解决这个问题?

提前致谢

----编辑----我在下面添加了一张表格的图片,其中说明了必须执行的操作

用户表

-仅当您看到图像时才阅读-因此,表中“操作”下的每个链接都会创建一个带有用户唯一ID变量的链接。 单击它时,我检查是否设置了$ _GET ['remove_id'],然后运行MySQL查询以删除具有该ID的那个人。

因此,基本上,如果要删除用户,Bootbox的想法是作为一条确认消息,我不想使用普通的alert(''),因为可以将其禁用。

ps删除功能确实有效,我现在只想使用bootbox添加确认。

Bootstrap(以及Bootbox)模态不会生成阻止事件,因此,如果您希望在单击超链接时发生某些事情,则需要防止默认行为(页面导航)。 就像是:

<a href="?name=Jacob" class="alert_with_href">I have an href</a><br><br>
<script>
   $(document).ready(function() {
      $('a.alert_with_href').on('click', function(e) // <-- add an event variable
      {
        e.preventDefault(); // <-- prevent the event
        bootbox.alert("I am an alert!");
      });
   });
</script>

既然您说过要确认某件事,请使用bootbox.confirm和一些AJAX:

<a href="?name=Jacob" class="alert_with_href" data-name="Jacob">I have an href</a><br><br>
<script>
    $(document).ready(function() {
        $('a.alert_with_href').on('click', function(e) // <-- add an event variable
        {
            e.preventDefault(); // <-- prevent the event

            var data = { name = $(this).data('name') };
            bootbox.confirm("Really delete?", function(result){
                if(result){
                    $.post('your-url', data)
                        .done(function(response, status, jqxhr){
                            // do something when successful response
                        })
                        .fail(function(jqxhr, status, error){
                            // do something when failure response
                        });
                }// end if
            }); // end confirm
        });
    });
</script>

我还添加了一个数据属性,以使其更易于获取发布值(不要使用GET请求执行删除操作)。 我认为您将在成功删除后重新加载页面,或者可以使用.remove删除包含要删除项目的“行”

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM