Javascript 仅当焦点元素失去焦点时触发事件

这是我的小提琴

我想做什么？ 我正在尝试创建一个动态可编辑表单。它应该

当有人单击编辑图标时，相应的输入字段应聚焦并可编辑。（我完成了这部分）

下一个我想要的是当一个元素处于焦点状态时，它失去了焦点，然后我想要再次向该元素添加readonly属性。这一部分不起作用。谁能解释一下原因吗。并给出解决方案

编辑： 在后面的部分中，我尝试使用alert（“some msg”）来检查事件是否被触发。在发布时，我只是将其替换为addAttr。这是一个输入错误

没有

addAttr（）

函数。

attr

的setter如下所示：

$('.form-control').blur(function() {
    $(this).attr("readonly", true);
});

此外，此处的

：focus

psuedo选择器是多余的，因为要触发

blur

事件，元素首先必须具有焦点。

您可以使用：

---

次要挑剔：在现代jQuery中，这应该是

attr（“readonly”，“readonly”）

或

prop（“readonly”，true）

。但为什么呢？当焦点不再是只读时，使用只读输入有什么意义？它是一种审阅表单。只是为了显示用户已填写的内容。我提供了一个编辑按钮，如果用户想改变他的信息。但是不要把注意力放在一些随机点击上，需要更多的帮助。我希望编辑按钮关闭，当有人点击它时，让readonly变为true，然后变为模糊。我希望编辑再次出现是的，非常感谢。我试过了，但没有成功。我将学习你的代码

$('.form-control').blur(function() {
    $(this).attr("readonly", true);
});

$(function () {
    $('.glyphicon-edit').click(function () {
        $(this).parent().find('.form-control').prop("readonly", false).focus().one('blur', function () {
            $(this).prop('readonly', true);
        });
    });
});