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.

i dont quite what shall happen. you have the link "click me" and "click me again", when shall happen what when clickin which link? — Alex
– Alex, Commented Feb 6, 2014 at 12:14
I'm guessing that when you click "click me again" the default behaviour of the first link should trigger — Anton
– Anton, Commented Feb 6, 2014 at 12:15
This may be an obvious question, but why not simply put the href on the 2nd link? — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented Feb 6, 2014 at 12:16
Last time I checked it was not possible to cause a link to navigate by triggering click event with javascript. If this was possible, spam sites could navigate to countless links each in new tab or window. — CodeToad
– CodeToad, Commented Feb 6, 2014 at 12:21

Sean · Accepted Answer · 2014-02-06 12:27:27Z

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

edited Feb 6, 2014 at 12:27

answered Feb 6, 2014 at 12:16

Sean

2,4281 gold badge26 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Alex Over a year ago

sorry but that is not true

Nik Chankov Over a year ago

The The example doesn't work (Chrome 32.0.1700.107), but it's working f you add setTimeout. See here: jsfiddle.net/HXeKD I will accept your answer, although I would implement Archer's suggestion

Frogmouth Over a year ago

Simple behavior, complex solution. It not seems the best way.

Sean Over a year ago

Aye, if you need to add hacks in like setTimeout, I would advise to rethink your solution.

nodws Over a year ago

the solution is to use triggerHandler() instead of trigger thats it

Frogmouth · Accepted Answer · 2014-02-06 12:21:05Z

1

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.

answered Feb 6, 2014 at 12:21

Frogmouth

1,8161 gold badge14 silver badges22 bronze badges

Comments

Bhojendra Rauniyar · Accepted Answer · 2014-02-06 12:21:29Z

1

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]);
});

answered Feb 6, 2014 at 12:21

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

2 Comments

Bhojendra Rauniyar Over a year ago

check e.preventDefault() is added where it is to be!

Anton Over a year ago

Ah ok, didn't see it at first.

A Paul · Accepted Answer · 2014-02-06 12:24:41Z

1

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]);
});

answered Feb 6, 2014 at 12:24

A Paul

8,3113 gold badges33 silver badges65 bronze badges

3 Comments

A Paul Over a year ago

I thought you want to land to that page. What exactly you want? I think I missed the big part.

Nik Chankov Over a year ago

Yes, I want exactly this, but using your jsfiddle sample it doesn't. (Chrome 32.0.1700.107). I will use Archer's suggestion, but it's also possible to make it your way, but adding setTimeout() as in the accepted answer.

A Paul Over a year ago

ok. I am using Firefox actually. Any way main thing is its fixed.

Collectives™ on Stack Overflow

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

4 Answers 4

5 Comments

Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related