使用jQuery检测甚至在href标签上点击

时间:2017-04-13 12:29:50

标签: javascript jquery html

我希望在处理之前单击href链接时显示确认对话框。所以我尝试在我的链接标记上触发click事件,以便它显示确认但不起作用。

<span class="action-indicator" id="delete">
    <a href=""><img src="images/delete.png" width="auto" height="20" alt="" title="Delete Referral" /></a>
</span>

脚本

$(document).ready(function() {
    $("#delete a").click(function(){
        $.confirm({
            title: 'Confirm!',
            content: 'Are you sure you want to upgrade your membership to <?php echo $mbs_name; ?>?',
            buttons: {
                confirm: function () {

                },
                cancel: function () {
                    $.alert('<span style="font-size: 23px">Upgrade Cancelled!</span>');
                }
            }
        });
        return false;
    });
});

请看看!帮助我为什么这不起作用。

3 个答案:

答案 0 :(得分:0)

您需要使用window.location

在确认回调中自行重定向
$("#delete a").click(function(){
    // store href or reference to "this"
    var href = this.href;

    $.confirm({
    title: 'Confirm!',
    content: 'Are you sure you want to upgrade your membership to <?php echo $mbs_name; ?>?',
    buttons: {
    confirm: function () {
       // now do redirect
       window.location.href = href

    },
    cancel: function () {
      $.alert('<span style="font-size: 23px">Upgrade Cancelled!</span>');
    }
    }
    });
    return false;
});

答案 1 :(得分:0)

您只需要链接jquery-confirm

&#13;
&#13;
$(document).ready(function() {
    $("#delete a img").click(function(){
        $.confirm({
        title: 'Confirm!',
        content: 'Are you sure you want to upgrade your membership to <?php echo $mbs_name; ?>?',
        buttons: {
        confirm: function () {

        },
        cancel: function () {
          $.alert('<span style="font-size: 23px">Upgrade Cancelled!</span>');
        }
        }
        });
        return false;
    });
});
&#13;
<span class="action-indicator" id="delete">
 <a href=""><img src="images/delete.png" width="auto" height="20" alt="Delete" title="Delete Referral" /></a>
</span>    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.2.0/jquery-confirm.min.js"></script>
&#13;
&#13;
&#13;

为了使这项工作没有图像,我在alt属性中添加了一个值。

答案 2 :(得分:0)

相反,您可以在此锚标记本身内提供onclick函数。因此,您可以在此脚本标记内编写自己的函数,就像之前使用的那样(确认警报)!试一试!

<a href='http://www.google.com' onclick='return check()'>check</a>

<script type='text/javascript'>

function check()
{
    return false;
}

</script>