CODEWITHSUNDEEP
javascriptjquery
Nik Chankov
Nik Chankov

Reputation: 6047

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

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.

Upvotes: 3

Views: 2324

Answers (4)

Sean
Sean

Reputation: 2418

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

Upvotes: 1

A Paul
A Paul

Reputation: 8251

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

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

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

Upvotes: 1

Frogmouth
Frogmouth

Reputation: 1818

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.

Upvotes: 1

Related Questions