Question

任何人都可以帮助我：

$('#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;问题是blur()事件在click()事件之前执行。

Answer 1

您可以使用超时推迟删除几毫秒。

示例：http://jsfiddle.net/vkun9/7/

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

我还将附加的blur移动到了click处理程序之外，因为每次单击该元素时它都会添加一个，并将单击处理程序更改为焦点以避免多个{{1}重复点击输入的按钮，如@dheerosaur所说。

所以

remove

但是，您所体验的不是问题。这是正常的行为，因为元素需要在另一个元素可以拥有它之前失去焦点（触发模糊）。

您还应该将标签$('#n') .focus(function() { $(this).parent().append('<a href="javascript:void()"> delete</a>'); $(this).next().click(function() { alert('clicked'); //this not working }); }) .blur(function() { var _this = this; setTimeout(function(){$(_this).next().remove();},100); });属性与input元素的id匹配。

Answer 2

使用outside events plugin，您可以执行以下操作：

$('.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();
    }
});

首先切换到使用焦点事件而不是输入字段上的click事件，有些人实际上使用键盘浏览表单字段; - ）。

然后创建删除链接，将其添加到页面并在输入字段中存储对它的引用。

然后使用外部事件插件，我们可以绑定focusoutside和clickoutside，当用户在输入字段外部标记或单击时会触发。通过检查事件的目标是删除链接，我们可以判断是否应该删除链接。

示例：http://jsfiddle.net/petersendidit/vkun9/6/

Answer 3

您可以尝试在模糊事件中设置非常短的超时。这对我有用。

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

Answer 4

我没有使用blur()，而是将基于hover()的方法放在一起，尽管它确实有一个稍微笨重的if / else语句：

$('.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

但是，这种方法可以确保只有一个删除链接附加到input_field（而不是在多次点击input时附加的多个链接你原来的演示）。

jquery优先执行

4 个答案: