Geek asks and answers

Jquery using a trigger ('click') in a click handler

I am trying to create a custom confirmation dialog when a user clicks a link to a specific class. This is pretty trivial, but to catch, if the user clicks the "Confirm" button in the dialog box (using Twitter Bootstrap 3), I want to call a click on the same link, but this time instead of showing the dialog, follow the link.

Everything is fine until the moment when I want to trigger the click event in the tag <a>with some parameters. Here is a very simplified example 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 the JSFiddle sample

, , console.log, URL-. , , . , window.location = $(element).attr('href'), , ?

.

+3
4

, ,

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

.

, , jQuery.

, click, .

, , , 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

+1

, :

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

:) @Archer .

+1

:

$(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]);
});
+1

Okay I found something. This is already an error in jquery in accordance with the ticket below, but is closed.

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

And a workaround is to add a range (or similar) inside the anchor and add this click. Below you will find a violin for the 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]);
});
+1
source

More articles:


All Articles