javascript - jquery priority execution - Stack Overflow

admin管理员组

文章数量:1279208

Can anyone help me with this:

$('#n').click(function() {
    $(this).parent().append('<a href="javascript:void()">&nbsp;delete</a>');
    $(this).next().click(function() {
        alert('clicked'); //this not working
    });
    $(this).blur(function() {
        $(this).next().remove();
    });
});

JS Fiddle demo; the problem is that the blur() event is executed before click() event.

Can anyone help me with this:

$('#n').click(function() {
    $(this).parent().append('<a href="javascript:void()">&nbsp;delete</a>');
    $(this).next().click(function() {
        alert('clicked'); //this not working
    });
    $(this).blur(function() {
        $(this).next().remove();
    });
});

JS Fiddle demo; the problem is that the blur() event is executed before click() event.

• javascript
• jquery

Share Improve this question Follow edited Dec 15, 2010 at 14:47 David Thomas 253k5353 gold badges381381 silver badges419419 bronze badges asked Dec 15, 2010 at 14:45 NickNick 16.1k55 gold badges2424 silver badges1515 bronze badges 1

• You should be careful with that click event though. A delete button is appended as many times as I click the textbox. – dheerosaur Commented Dec 15, 2010 at 14:55

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

You can use a timeout to postpone the removal for some milliseconds.

example : http://jsfiddle/vkun9/7/

$(this).blur(function() {
            var _this = this;
            setTimeout(function(){$(_this).next().remove();},100);
        });

I also moved the blur attaching to be outside of the click handler, as it was adding an additional one each time the element was clicked, and changed the click handler to the focus to avoid multiple remove buttons from repeated clicking on the input, as @dheerosaur noted.

so

$('#n')
    .focus(function() {
        $(this).parent().append('<a href="javascript:void()">&nbsp;delete</a>');
        $(this).next().click(function() {
            alert('clicked'); //this not working
        });
    })
    .blur(function() {
        var _this = this;
        setTimeout(function(){$(_this).next().remove();},100);
    });

What you experience, though, is not a problem. It is the normal behaviour, as the element need to lose focus (fires the blur) before another element can have it.

You should also match the label for attribute with the id of the input element.

Use the outside events plugin and you can do something like this:

$('.input_field input').focus(function() {
    var div = $(this).parent();
    var link = $('<a href="#">delete</a>').click(function(e) {
        e.preventDefault();
        alert('clicked');
    }).appendTo(div);
    $(this).data('delete', link);
}).bind('focusoutside clickoutside', function(e) {
    var link = $(this).data('delete');
    if (link && e.target != link[0]) {
        link.remove();
    }
});

First switch to using the focus event rather than the click event on your input field, some people actually use the keyboard to navigate through form fields ;-).

Then its creating the delete link, adding it to the page and storing a reference to it in on the input field.

Then with the outside event plugin we can bind focusoutside and clickoutside which get triggered when the user tabs or clicks outside the input field. By checking of the target of the event was the delete link or not we can tell if we should remove the link.

Example: http://jsfiddle/petersendidit/vkun9/6/

you can try setting a very short timeout in the blur event. this worked for me.

    $(this).blur(function() {
        setTimeout(function(){$(this).next().remove();}, 1);
    });

Rather than using blur() I put together a hover()-based approach, though it does have a slightly clunky if/else statement:

$('.input_field').hover(
    function(){
        if ($(this).find('.delete').length) {
            return false;
        }
        else {
            $('<a href="#" class="delete">delete</a>')
            .appendTo($(this));
        }
    },
    function(){
        if ($('#n').is(':focus')){
            return false;
        }
        else {
            $(this).find('.delete').remove();
        }
    }
);

JS Fiddle demo.

This approach does, however, ensure that there's only one delete link appended to the input_field (rather than the multiple links appended if the input is clicked multiple times in your original demo).

本文标签： javascriptjquery priority executionStack Overflow