I want to redirect to link on <a> only after confimation?

Question

I had a problem and I am struggling. I want to redirect to the link href="/jobs/emp/del/?id={{ job.pk }}" after confirmation. I am using bootboxjs

{% for job in jobs %}
<a class="btn deleteJob" href="/jobs/emp/del/?id={{ job.pk }}"</a> 
{% for job in jobs %}

How can I require confirmation before executing the link /jobs/emp/del/?id={{ job.pk }}?

I tried:

<a class="btn deleteJob"><span style="display:none">/jobs/emp/del/?id={{ job.pk }}</span>
                            <i class="icon-trash"></i></a>
<script src="/static/js/bootbox.js" type="text/javascript"></script>
<script>

$('.deleteJob').click(function(){
    bootbox.confirm("Are you Sure want to delete!", function (x) {
    if (x){

        var link= $(this).find( $spans ).text();            
        document.location.href='/'+link+'/';}
    });        
});
</script>

is inside a big for loop, but it is not working!?

Answer 1

I've not used bootbox, but assuming the x value in the function is the boolean result of the popup, this should work:

<a href="/jobs/emp/del/?id={{ job.pk }}" class="btn deleteJob">
    <i class="icon-trash"></i>
</a>

$('.deleteJob').click(function(e) {
    e.preventDefault();
    var $link = $(this);
    bootbox.confirm("Are you Sure want to delete!", function (confirmation) {
        confirmation && document.location.assign($link.attr('href'));
    });        
});

Note, you mention a for loop - the jQuery code there does not need to be in a loop. That code will work for all instances of the .deleteJob anchor element.