CODEWITHSUNDEEP
javascripthtmljqueryjquery-events
Joe Mastey
Joe Mastey

Reputation: 27119

Fire next event up, but not after that

For a page, I've been given a link wrapped inside a label, like this:

<label for='checkbox_elem'>
    Links to <a href='somepage.php' target='anotherwindow'>another page.</a>
</label>

When the user clicks on the link in all browser, the page is spawned in a new tab as envisioned, but in Firefox the checkbox linked to the label is also selected. This is a non-desired behavior.

I want to run some jQuery to allow the link to pop, but to kill the event thereafter. I have the following, which works, but isn't very elegant:

$(document).ready(function(){
    $('label a').click(function(e){
        open($(this).attr('href'), $(this).attr('target'));
        return false;
    });
});

Can any of you think of a more elegant way to do this than to replicate the element's behavior manually and kill the event?

As an aside, I've been trying with stopPropagation, but haven't had much success.

Also, please note that the above solution does work, but I am looking for something more elegant for generically stopping events from propagating past their first call. (The first native call. If I add a callback, I still want the native element behavior to fire, but not that of its parent) .

Upvotes: 2

Views: 1230

Answers (7)

Sarfraz
Sarfraz

Reputation: 382696

Try using .one() instead of .click():

$(document).ready(function(){
    $('label a').one(function(e){
        open($(this).attr('href'), $(this).attr('target'));
        return false;
    });
});

Upvotes: 0

Kristoffer Sall-Storgaard
Kristoffer Sall-Storgaard

Reputation: 10636

KISS

$(document).ready(function(){
    $('label a').click(function(e){
        open($(this).attr('href'), $(this).attr('target'));
        $(this).parent().click(); //Click the label again to reverse the effects of the first click.
        return false;
    });
});

Upvotes: 0

Reigel Gallarde
Reigel Gallarde

Reputation: 65264

Well, if you are allowed to change the html on client-side, you can always move the links outside the label like this,

$(document).ready(function(){ 
    $('label').find('a').each(function(){
        var $anchor = $(this);        
        $(this).closest('label').after($anchor);
    });
});​

demo

Upvotes: 0

Ionuț Staicu
Ionuț Staicu

Reputation: 22166

This one:

<label> test <a href="#">Test</a> <input type="checkbox" name="check[]" /></label>

Or even:

<label for="test1"> test <a href="#">Test</a> <input type="checkbox" name="test1" id="test1" class="checkbox" /></label>

And js:

$('a').click(function(e){
    var t=$(this);
    window.open(t.attr('href'), t.attr('target'));
    return false;
});

Works for me. Maybe there is smth that interfere with your script?

Upvotes: 0

Marnix van Valen
Marnix van Valen

Reputation: 13673

Try stopping the event from propagating at the label.

$(document).ready(function(){
    $('label').click(function(e){
        e.stopPropagation();
    });
});

Upvotes: 1

Coffee Bite
Coffee Bite

Reputation: 5164

Maybe you should change your html to:

<label for='checkbox_elem'>Links to </label>
<a href='somepage.php' target='anotherwindow'>another page.</a>

and use no javascript at all?

Upvotes: 0

peol
peol

Reputation: 872

You could use $(elem).one(fn) -- http://api.jquery.com/one/

Upvotes: 0

Related Questions