jquery using trigger('click') within the click handler

Question

I am trying to create a custom confirm dialog when user clicks on a link with specific class. It's pretty trivial, but the catch is, if the user clicks on the "Confirm" button in the dialog (Using Twitter Bootstrap 3), I want to trigger click on the same link, but this time instead of showing dialog, to follow the link.

Everything is well up to the point when I want to trigger a click event on the <a> tag with some parameters. Here is very simplified sample of what I want to achieve

Html:

<a class="initial" href="http://yell.com">click me</a>
<div class="dialog hidden">
    <a href="#">Click me again</a>
</div>

JavaScript:

$(document).on('click', 'a.initial', function(e, forced){
    //return true;
    if(typeof(forced) !== 'undefined' && forced === true){
        $(this).addClass('clicked');
        console.log('Clicked');
        return true;
    } else{
        e.preventDefault();
        $(this).removeClass('clicked');
        $('div').removeClass('hidden');
    }
});

$(document).on('click', 'div.dialog a', function(e){
    $(this).parent().addClass('hidden');
    $(this).parent().prev().trigger('click', [true]);
});

Here is JSFiddle sample

As you can see, if the second link is clicked, the first link is colored in red, as well as console.log triggers message, but then the link doesn't follow the url. Unfortunately, I don't see any error or warning which could give me some clue. I know I can use window.location = $(element).attr('href'), but I am wondering why it is not working in the described way?

Any help is much appreciated.

Answer 1

It's possible to do this, for example, running

document.getElementById('nav-tags').click();

On this page will take the user to the tags page.

Therefore, it seems the issue is the jQuery trigger function.

The problem then becomes, being able to natively trigger the click event but also pass that forced boolean into the event.

The solution I came up with is to remove the second argument, and to set a state in the original link via data :

$(document).on('click', 'a.initial', function(e){
    //return true;
    if($(this).data('trigger') === true) {
        $(this).addClass('clicked');
        console.log('Clicked');
    } else{
        e.preventDefault();
        $(this).removeClass('clicked');
        $('div').removeClass('hidden');
        $(this).data('trigger', false);
    }
});

$(document).on('click', 'div.dialog a', function(e){
    $(this).parent().addClass('hidden');
    $(this).parent().prev().data('trigger', true).get(0).click();
});

JSF

Answer 2

You can consider to use a solution like this:

$(document).on('click', 'a.initial', function(e, forced){
    e.preventDefault();
    $('div').removeClass('hidden').find("a").attr("href",this.href);
});

:) like @Archer suggest solution.

Answer 3

Try this:

$(document).on('click', 'a.initial', function(e, forced){
    e.preventDefault();    
    //return true;
    if(typeof(forced) !== 'undefined' && forced === true){
        $(this).addClass('clicked');
        console.log('Clicked');
        return true;
    } else{
        //e.preventDefault();
        $(this).removeClass('clicked');
        $('div').removeClass('hidden');
    }
});

$(document).on('click', 'div.dialog a', function(e){
    e.preventDefault();
    $(this).parent().addClass('hidden');
    $(this).parent().prev().trigger('click', [true]);
});

Answer 4

okey. I found something. This is already a bug in jquery as per the below ticket, but closed.

http://bugs.jquery.com/ticket/11326

And the workaround is adding a span(or similar) inside the anchor and add click on that. Please find below the fiddle for same

http://jsfiddle.net/RCmar/2/

HTML

<a class="initial" href="http://yell.com"><span>click me</span></a>
<div class="dialog hidden"><a href="#">Click me again</a></div>

JS

$(document).on('click', 'a.initial span', function(e, forced){
    //return true;
    alert(1);
    if(typeof(forced) !== 'undefined' && forced === true){
        $(this).addClass('clicked');
        console.log('Clicked');
        return true;
    } else{
        e.preventDefault();
        $(this).removeClass('clicked');
        $('div').removeClass('hidden');
    }
});

$(document).on('click', 'div.dialog a', function(e){
    $(this).parent().addClass('hidden');
    $(this).parent().prev().children().trigger('click', [true]);
});